vue渲染多层数据用v-for

new Vue({el: '#someElement',data: {category: [{name: 'cate0',items: [{value: 'cate0 ite

dreamStart_Lin

7784人浏览 · 2017-04-19 14:46:38

dreamStart_Lin · 2017-04-19 14:46:38 发布


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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^