问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

v-for 多层循环

头像
lynnic89
    37083036
    new Vue({
    el: '#someElement',
    data: {
        category: [
            {
                name: 'cate0',
                items: [
                    { 
                        value: 'cate0 item0'
                    }
                ]
            },
            {
                name: 'cate1',
                items: [
                     {
                        value: 'cate1 item0'
                     }
                ]
            }
        ]
    }
})

    不改变数据结构，循环输出绑定value的标签,，该怎么写？
    不能外层嵌套其他标签
    <span v-for="这里是循环">{{这里是value}}</span>

    vue.js
    阅读 20.2k
    1 个回答
    得票最新
    头像
    Chobits
      7.4k2827
      <!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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题