Vue.js - v-for“未定义属性或方法”

Question

我遇到了一个我看到很多人都遇到的问题，但我无法从我发现的类似问题中解决它。

我在 Vue 组件中使用 v-for 并且数组的值总是给我一个警告说变量丢失：

[Vue 警告]：属性或方法“文本”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

我为它创建了一个jsfidle：

<template>
  <section>
    <section :v-for="text in texts">{{text}}</section>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component<Map>({
  data() {
    return {
      texts: ["bbbbb", "xxxxx"]
    };
  }
})
export default class Map extends Vue {}
</script>

如果我将{{text}} 更改为{{texts[0]}}（参见https://jsfiddle.net/hdm7t60c/3/），我会得到bbbbb，但它不会迭代，我也会得到错误。

这是我遇到的问题的冰山一角，但也许如果我解决了这个问题，我就能把一切都做好。

Answer 1

尝试从v-for指令中删除绑定符号:，并且您还应该指定key属性：

<template>
  <section>
    <section v-for="(text,index) in texts" :key="index">{{text}}</section>
  </section>
</template>