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>

 

 

 

Logo

前往低代码交流专区

更多推荐