vue 遍历嵌套数组

json

{
  "user": [

    {
      "id": 1001,
      "name": "aaaa",
      "like": [
        {
          "num": 1,
          "cat": "evoke"
        }
      ]
    },

    {
      "id": 1002,
      "name": "bbbb",
      "like": [
        {
          "num": 2,
          "cat": "invoke"
        }
      ]
    },

    {
      "id": 1003,
      "name": "cccc",
      "like": [
        {
          "num": 3,
          "cat": "revoke"
        }
      ]
    },

    {
      "id": 1004,
      "name": "dddd",
      "like": [
        {
          "num": 4,
          "cat": "rocket"
        }
      ]
    }
  ]
}

html

<body>
<div id="qiu">
    <h5 v-for="(u,index) in user">{{index}}:{{u.id}}
        <div v-for="(n,index_) in u.like">{{index_}}:{{n.cat}}</div>
    </h5>
</div>
<script src="../js2/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#qiu',
        data(){
            return {
                user:[]
            }
        },
        methods:{
            show1: function(){
                console.log("显示内容")
            },
            show2(){
                console.log("show2")
            },

            clickPaixu(IsAnswer,index){
                console.log("点击:" + IsAnswer)
                console.log("点击:" + index)
                this.num = IsAnswer;
                this.aa[index] = index;
                console.log("aa[index]:"+this.aa[index])
            }

        },
        created: function () {
            axios.get('test.json').then((response) => {
                console.log(response.data.user)
                this.user = response.data.user
            })
        },
    })
</script>
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值