VueJS 使用 props 渲染嵌套列表
Posted
技术标签:
【中文标题】VueJS 使用 props 渲染嵌套列表【英文标题】：VueJS nested list rendering with props 【发布时间】：2017-04-27 21:46:55 【问题描述】：我想用 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.
我错过了什么？
【问题讨论】：
它的错字道具是正确的不是道具 【参考方案1】：打错了，你说的组件中的 prop 正确的是 props
Vue.component('todo-item',
template: '<li>subtodo.text</li>',
props: ['subtodo']
)
https://jsfiddle.net/uofmd96q/
【讨论】：
【参考方案2】：试试这个：
<todo-item v-for="st of todo.subTodos" :subtodo="st"></todo-item>
【讨论】：
【参考方案3】：如果有人需要在单击时呈现嵌套列表，以供将来参考，这是我使用项目索引制作的一个非常简单的嵌套列表示例。
<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;
【讨论】：
以上是关于VueJS 使用 props 渲染嵌套列表的主要内容，如果未能解决你的问题，请参考以下文章