Question

我有一个对象的对象，我用vue传递，我这样做是为了运行：

 <ul>
    <li v-for="subjects in questions">
        <li v-for="question in subjects">
            @{{ question }}
        </li>
    </li>
</ul>

但是我收到了这个错误：

属性或方法“subject”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。（在根实例中找到）

如何在vue中运行嵌套循环？

Answer 1

您可以在这里找到示例：

＆＃13;

var vm = new Vue({
  el: '#app',
  data: {
    questions: [
      {
        subjects: ['question 1.1', 'question 1.2']
      },
      {
        subjects: ['question 2.1', 'question 2.2']
      }
    ]
  }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="question in questions">
      <ul>
        <li v-for="subject in question.subjects">
          {{ subject }}
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

接受的答案解决了作为属性创建的对象内的数组。我正在寻找迭代简单的多维数组，它把我带到了这个页面。所以为后代添加这个答案：

<script src="https://unpkg.com/vue"></script>

<div id='app'>

  <ol>
    <li v-for="subjects, index in questions">
      {{ index }}
      <ol type='I'>
        <li v-for="question in subjects">
          {{ question }}
        </li>
      </ol>
    </li>
  </ol>
</div>

<li/>

IOW，问题中的示例问题是在父<li/>内添加了裸体嵌套import React, { Component } from 'react'; import { Image, StyleSheet, Text, View, } from 'react-native'; export default class App extends Component { constructor(props){ super(props); this.state = { photos: '', titles: '' }; } componentWillMount(){ this.fetchData(); } fetchData = async () => { let response = await fetch('http://jsonplaceholder.typicode.com/photos/1'); let json = await response.json(); this.setState({titles: json.title, photos: json.url.replace('http','https')}); }; render() { console.log(this.state.photos) return ( <View style={styles.container}> <Image source={{uri: this.state.photos}} style={{height: 600, width: 600}} resizeMode= 'cover' /> <Text> Title: {this.state.titles} </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ecf0f1', } });而没有子列表分组。

Vue中的嵌套循环

2 个答案: