vue 遍历嵌套数组_vue 两个数组一起遍历

作者：我家自动化 | 2024-02-11 19:52:46

踩

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/76735