v-for嵌套循环上的Vue js“无法读取未定义的属性'原始'”

Question

你能帮我解决这个问题吗？我收到此错误

无法读取未定义的属性“原始”

当我点击第二个链接时。

HTML

<div id="demo">
  <div class="item">
    <div class="menu">
      <a href="javascript:void(0)" id="object_1" @click.prevent="onClick">object 1</a> -
      <a href="javascript:void(0)" id="object_2" @click.prevent="onClick">object 2</a>
    </div>
  </div>
  <div class="main">
    <!-- 1st LOOP on main object -->
    <template v-for="object in objects" v-if="object.visible">
      <!--  2nd LOOP on children  -->
      <template v-for="children1 in object">
        <!--  3rd LOOP on array  -->
        <template v-for="children2 in children1">
          {{children2 | json}}
        </template>
      </template>
    </template>
  </div>
</div>

JS

new Vue({
  el: '#demo',
  data: {
    "objects": {
      "object_1": {
        "visible": false,
        "children": [{
          "string": "string 1"
        }, {
          "string": "string 2"
        }]
      },
      "object_2": {
        "visible": false,
        "children": [{
          "string": "string 3"
        }, {
          "string": "string 4"
        }]
      }
    }
  },
  methods: {
    onClick: function(event) {
      var getID = event.path[0].id
      for (object in vm.objects) {
        vm.$set(`objects.${object}.visible`, false)
      }
      vm.$set(`objects.${getID}.visible`, true)
    }
  }
})

http://jsbin.com/gesigohuqo

Answer 1

你不需要 3 个循环：

<!-- 1st LOOP on main object -->
<template v-for="object in objects" v-if="object.visible">
  <!--  2nd LOOP on array  -->
  <template v-for="children in object.children">
    {{ children | json }}
  </template>
</template>