2016-10-13 4 views
3

У меня есть объект объектов, которые я передаю с вей, и я делаю это для запуска:Вложенный цикла в Vue

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

, но я получаю эту ошибку:

Свойства или метод «предметы "не определен в экземпляре, но упоминается во время рендеринга. Обязательно объявляйте свойства реактивных данных в опции данных. (найдено в корневом примере)

Как запустить вложенный цикл в vue?

ответ

5

Здесь вы идете на примере:

var vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    questions: [ 
 
     { 
 
     subjects: ['question 1.1', 'question 1.2'] 
 
     }, 
 
     { 
 
     subjects: ['question 2.1', 'question 2.2'] 
 
     } 
 
    ] 
 
    } 
 
})
<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>

+0

Спасибо за помощь! –

+0

@ пользователь1332738 добро пожаловать! –

+0

не работает для меня :( –

0

Принятый ответ адрес массивов внутри объектов, созданных в качестве свойств. Я искал итерации простых многомерных массивов, и это привело меня к этой странице. Так, добавив, что ответ, а также для потомков:

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    questions: [ 
 
     ['test1.1', 'test1.2'], 
 
     ['test2.1', 'test2.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>

IOW, проблема с образцом в вопросе, что есть голая вложенная <li/> добавила внутри родительского <li/> без подсписка группировки ,

Смежные вопросы