Vue.js中v-for循环的动态嵌套
Vue.js中v-for循环的动态嵌套
提问于 2019-12-16 15:21:22
不确定这是否可能，但值得一试。
我正在尝试构建一个系统，在这个系统中，可以在同一组件中动态呈现一组组件，在一组动态嵌套的v-for循环中。
举个例子。
假设我在这个结构中有一系列的<div/>和一个json
list : [
['Test','Test],
['Test2', 'Test2],
['Test3','Test3],
]这将呈现：
<div>
<div>
<div>
Test
</div>
<div>
Test
</div>
</div>
<div>
<div>
Test2
</div>
<div>
Test2
</div>
</div>
<div>
<div>
Test3
</div>
<div>
Test3
</div>
</div>
</div>但是，如果我添加了另一组嵌套，例如
list : [
['Test','Test],
['Test2', 'Test2],
['Test3',['Test4', 'Test4']],
]它会像这样渲染，
<div>
<div>
<div>
Test
</div>
<div>
Test
</div>
</div>
<div>
<div>
Test2
</div>
<div>
Test2
</div>
</div>
<div>
<div>
Test3
</div>
<div>
<div>
Test4
</div>
<div>
Test4
</div>
</div>
</div>
</div>我知道如何使用固定级别的嵌套来完成此任务。
<div>
<div v-for="(item,index) in list" :key="index">
<div v-for="(subItem, subIndex) in item :key="subIndex">
{{subItem}}
</div>
</div>
</div>但是，如果必须在运行时解释它，我不确定如何让它对动态嵌套级别做出反应。如果任何人对此有任何想法，我将不胜感激。
编辑:为了澄清，我正在寻找的解决方案将适用于未知的嵌套。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-16 22:12:37
创建两个组件<list>和<list-item>，如果项目属性是一个数组，则在<list-item>中递归地调用<list>，否则呈现一个普通的<div>标记。
如下所示：
Vue.component('list', {
props:["items"],
functional: true,
render: function(createElement,{ props, children }){
return props.items.map((item)=>createElement('list-item',{ props: {item} }))
}
});
Vue.component('list-item', {
props:["item"],
template: '<div v-if="isArray(item)"><list v-bind:items="item"> </list> </div>'+
'<div v-else> {{item}} </div>',
methods:{
isArray:function(item){
return Array.isArray(item);
}
}
});
var vm = new Vue({
el: '#app',
data:{
items:[
['Test','Test'],
['Test2', 'Test2'],
['Test3',['Test4', 'Test4']],
],
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<list v-bind:items="items"></list>
</div>
</div>
Stack Overflow用户
发布于 2019-12-16 15:33:19
为了实现this..you，可以尝试使用组件和回调组件进行嵌套循环。这只是一个想法，我不确定它是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59352118
复制相关文章
相似问题
腾讯云开发者
