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

晚上好,

我有一段代码，可以生成包含数组的对象的javascript数组（标题）（我已将其转换为JSON字符串，仅供您使用）：

我正试图通过以下方式访问它：

<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 warn]：属性或方法“header”未在实例上定义，但在渲染期间被引用

---

当我移除第二个循环时，它似乎就消失了。

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

<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.text+”
'
}

另一种解决方案：

<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>

---

但是最好将child

放在

中，就像在puelo的代码中一样，所以vue将循环限制到DOM元素及其子元素？是的。您可以将其想象为类似javascript循环的东西（请参见编辑的答案）

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

<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>