vue3 v-for报错

Question

我按照vue3文档敲的，不知道哪里出错误了？请大神指点

Answer 1

不知道是不是 vue3 有改变哈。vue2要求有根节点，而且 template是描述这块内容是模板，也没见过直接操作的。。你可以贴一下你的文档地址

<template>
  <div >
    <div v-for="item in list" v-show="item.id > 3">{{ item.id }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [{ id: 1 }, { id: 2 }, { id: 3 }],
    };
  },
};
</script>

---

他说的这些，都是内容，在单文件组件中，还是要有一个template来包裹的

Answer 2

最外层template有且只有一个，你说的组件可以包含多个根节点实际意思是最外层template可以包裹多个节点，并不能可以存在多个外层template，可以包裹多个里层template进行v-for

错误：

<template v-for="item in list">
  xxx
</template>

正确：

<template>
  <template v-for="item in list">
    xxx
  </template>
</template>

Answer 3

写成这样就行

<template>
  <template v-for="item in list">
    <div>{{ item.label }}</div>
  </template>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [{ label: 1 }, { label: 2 }, { label: 3 }],
    };
  },
};
</script>