vue3 v-for报错

稀烂小青蛙
  • 7

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

回复
阅读 357
3 个回答
✓ 已被采纳

不知道是不是 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来包裹的

image.png

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

错误:

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

正确:

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

写成这样就行

<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>
你知道吗?

宣传栏