您的位置：首页 > 产品设计 > UI/UE

vue渲染多层数据用v-for

2017-04-19 14:46 495 查看 
new Vue({
el: '#someElement',
data: {
category: [
{
name: 'cate0',
items: [
{
value: 'cate0 item0'
}
]
},
{
name: 'cate1',
items: [
{
value: 'cate1 item0'
}
]
}
]
}
})
不改变数据结构，循环输出绑定第三层value的标签,，这该怎么写呢？
直接上代码
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><div id="demo"><div v-for="c in category">{{c.name}}<input v-for="item in c.items" v-model="item.value" /></div><div v-for="item in items"><input v-model="item.value" /></div><div v-for="item in category | get_items"><input v-model="item.value" /></div>{{category | json}}</div><script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script><script>'use strict';new Vue({el: '#demo',data: {category: [{name: 'cate0',items: [{value: 'cate0 item0'}]},{name: 'cate1',items: [{value: 'cate1 item0'}]}]},computed: {items() {return this.$eval('category | get_items')//var arr = []//this.category.forEach(c => c.items.forEach(t => arr.push(t)))//return arr}},filters: {get_items: function (category) {var arr = []category.forEach(c => c.items.forEach(t => arr.push(t)))return arr}},})</script></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航