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

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>