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

Question

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

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

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

我为它创建了一个jsfidle：

<template>

  <section>

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

  </section>

</template>

<script>

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>&nbsp; <section>&nbsp; &nbsp; <section v-for="(text,index) in texts" :key="index">{{text}}</section>&nbsp; </section></template>