Question

晚上好

我有一段代码可以生成对象的javascript数组（标头），其中还包含数组（我已经为您将其转换为JSON字符串）：

[  
   {  
      "text":"One",
      "link":"#one",
      "subheaders":[  
         {  
            "text":"Installation",
            "link":"#Installation"
         }
      ]
   },
   {  
      "text":"Two",
      "link":"#two",
      "subheaders":[  
         {  
            "text":"Installation2",
            "link":"#Installation2"
         }
      ]
   }
]

我正在尝试使用：

<ul>
    <li v-for="header in headers">
        <a :href="header.link">{{ header.text }}</a>
    </li>
    <ul>
        <li v-for="subheader in header.subheaders">
            <a :href="subheader.link">{{ subheader.text }}</a>
        </li>
    </ul>
</ul>

问题出在第二个循环中，我不断得到：

[Vue警告]：属性或方法“标头”未在实例上定义，但在渲染期间被引用。

删除第二个循环后，似乎消失了。

Answer 1

您的第二个循环不在第一个循环的范围内。我想您想要这样的东西：

<ul>
    <li v-for="header in headers">
        <a :href="header.link">{{ header.text }}</a>
        <ul>
            <li v-for="subheader in header.subheaders">
                <a :href="subheader.link">{{ subheader.text }}</a>
            </li>
        </ul>
    </li>
</ul>

为了获得更好的想象力，vue-js会执行以下操作（不准确）：

for (header in headers) {
  echo '<li><a>' + header.text + '</a></li>'
}

Answer 2

另一种解决方案：

<ul>
<template v-for="header in headers">
    <li>
        <a :href="header.link">{{ header.text }}</a>
    </li>
    <ul>
        <li v-for="subheader in header.subheaders">
            <a :href="subheader.link">{{ subheader.text }}</a>
        </li>
    </ul>
</template>
</ul>

但是最好将孩子<ul>放在<li>中，就像 puelo 的代码中一样

Vue.js中嵌套对象的访问属性

2 个答案: