Рендеринг вложенного списка VueJS с реквизитами

Я хочу отобразить вложенный список с помощью Vue.js, но мой код не работает в части вложенного компонента. Мой основной шаблон:

<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
        <ul>
          <todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item>
        </ul>
      </li>
    </ul>
  </div>
</body>

И мой js-файл:

Vue.component('todo-item', {
  template: '<li>{{subtodo.text}}</li>',
  prop: ['subtodo']
})

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      todos : [
        { 
          text : 'Learn JavaScript', 
          subTodos : [
            { text : 'Linting'}, 
            { text : 'Bundling'}, 
            { text : 'Testing'}
          ]
        },
        { 
          text : 'Learn Vue', 
          subTodos : [
            { text : 'Components'}, 
            { text : 'Virtual DOM'}, 
            { text : 'Templating'}
          ]
        },
        { 
          text : 'Build something awesome', 
          subTodos : [
            { text : 'Build'}, 
            { text : 'Something'}, 
            { text : 'Awesome'}
          ]
        }
      ]
    }
  }
})

По сути, на первом уровне я визуализирую массив с помощью v-for, затем передаю экземпляр в подкомпонент для другой итерации, а также v-bind текущий экземпляр, чтобы использовать его в дочернем шаблоне.

У меня есть рабочая скрипка: https://jsfiddle.net/ny7a5a3y/4/

Консоль выдает мне эту ошибку:

[Vue warn]: Property or method "subtodo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Что мне не хватает?


vue.js vuejs2 vue-component
person marchello    schedule 12.12.2016    source источник
comment
Это опечатка, реквизит правильный, а не реквизит   -  person Belmin Bedak    schedule 13.12.2016

Ответы (3)


arrow_upward
5
arrow_downward

Это опечатка, вы сказали, что реквизит в компоненте правильный реквизит

Vue.component('todo-item', {
  template: '<li>{{subtodo.text}}</li>',
  props: ['subtodo']
})

https://jsfiddle.net/uofmd96q/

person Belmin Bedak    schedule 12.12.2016

arrow_upward
1
arrow_downward

попробуй это:

<todo-item v-for="st of todo.subTodos" :subtodo="st"></todo-item>
person Kamil Kiełczewski    schedule 12.12.2016

arrow_upward
0
arrow_downward

Для дальнейшего использования, если кому-то нужно отображать вложенный список по щелчку, это очень простой пример вложенного списка, который я сделал, используя индекс элементов.

<div v-for="(aggList, index) in aggregationList">
        <div v-on:click="LoadAggIndex(index)">
            {{aggList.name}} and index: {{index}}
        </div>

    </div>

<div v-for="agg in loadedAggList">
        {{agg.key}}
        {{agg.count}}
    </div>

Vue.js

 methods: {
        LoadAggIndex: function (index) {
            SearchBar.loadedAggList = SearchBar.aggregationList[index].aggregates;
        }
    }
person Jack    schedule 22.07.2021