vue渲染多层数据用v-for

最新推荐文章于 2024-03-05 10:15:30 发布

dreamStart_Lin

最新推荐文章于 2024-03-05 10:15:30 发布

阅读量7.6k

点赞数

分类专栏： web前端文章标签： vue 多层数据渲染 v-for

本文链接：https://blog.csdn.net/dreamStart_Lin/article/details/70240688

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏


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>