vue渲染多层数据用v-for

来源:互联网 发布:淘宝申请售后过期 编辑:程序博客网 时间:2024/05/24 01:47
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>

0 0
原创粉丝点击