Question

我有一个名为 verses 的多维数组：

export default {
  name: "Example",
  data: () => ({
    verses: [['First', 'Verse'], ['Second', 'Verse']]
  })
}

我试图像这样遍历多维 verses 数组：

<p v-for="(verse, verse_index) in verses" :key="verse_index">
    <div v-for="(word, word_index) in verse" :key="word_index">
        {{ word }}
    </div>
</p>

我收到此错误：

<块引用>

[Vue 警告]：实例上未定义属性或方法“verse” 但在渲染期间引用。确保这个属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

如何在 Vue 中遍历多维数组？

Answer 1

不确定您是否正确传递了数据值，但我已对其进行了一些更改，并且对我来说效果很好。

   data:  () => {
    return {
      verses: [['First', 'Verse'], ['Second', 'Verse']]
    }
   }

还有一个建议。不建议在 div 标签内使用 p 标签

Answer 2

<p> element cannot contain a <div>，因此浏览器将其提升到外部，从而生成此模板：

<p v-for="(verse, verse_index) in verses" :key="verse_index">
</p>
<div v-for="(word, word_index) in verse" :key="word_index">
  {{ word }}
</div>
<p></p>

注意第二个 v-for 如何在定义 v-for 的第一个 verse 之外。

如果您出于某种原因确实打算在 <div> 中插入 <p>，您可以通过将 <div> 包装在 <template> 中来解决该问题，以防止浏览器解析它：

<p v-for="(verse, verse_index) in verses" :key="verse_index">
  <template> ?
    <div v-for="(word, word_index) in verse" :key="word_index">
        {{ word }}
    </div>
  </template>
</p>

demo

Answer 3

上面代码中使用vue语法没有任何问题。

问题是因为 <div> 在 <p> 内

这样就行了

<div v-for="(verse, verse_index) in verses" :key="verse_index">
  <div v-for="(word, word_index) in verse" :key="word_index">
    {{ word }}
  </div>
</div>

Vue：如何进行嵌套循环并遍历多维数组？

3 个答案: