如何修复“多个根元素”v-for 错误答案

【问题标题】：How to fix "multiple root element" v-for error如何修复“多个根元素”v-for 错误
【发布时间】：2021-06-18 05:00:21
【问题描述】：

我是 Vue.js 的新手，我还在学习它。我遇到了这个错误，我不知道如何解决。

这是我的简单脚本：

<template>
  <div v-for="item in array" :key="item.id">
    {{item}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      array: ['Lion','Bear','Fish','Bird']
    }
  }
}
</script>

这是出现的错误：

Cannot use v-for on stateful component root element because it renders multiple elements.

  1  |
  2  |  <div v-for="item in array" :key="item.id">
     |       ^^^^^^^^^^^^^^^^^^^^^
  3  |    {{item}}
  4  |  </div>

有谁知道如何解决这个错误？

【问题讨论】：

尝试将此v-for-ed div 包装在另一个容器中。
这是因为你没有根标签。我假设您正在使用 vue2 添加一个 div 作为根。但是在 Vue3 中，由于 Fragments，它应该不再是问题
@MadsterMIZE 请确认您的 Vue 版本。如果你遇到这个问题，我认为不是 Vue 3。
这能回答你的问题吗？显然是 Vue js error: Component template should contain exactly one root element 的副本
我删除了 vuejs3 标签并添加了 vuejs2。显然 v2 是您正在使用的。

标签： vue.js vuejs2

【解决方案1】：

尝试将变量从 array 重命名为 animalNames 类似。并从循环中删除id，因为不存在id元素，您可以使用index

<template>
  <div>
   <div v-for="item,index in array" :key="index">
      {{item}}
   </div>
  </div>
</template>

【讨论】：

"remove id from loop' 这是导致问题的原因

【解决方案2】：

你必须有一个根标签。尝试将循环的 div 包装在另一个 div 中。

<template>
    <div>
      <div v-for="item in array" :key="item.id">
        {{item}}
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      array: ['Lion','Bear','Fish','Bird']
    }
  }
}
</script>

【讨论】：