Question

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

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

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

我为此创建了一个jsfidle：https://jsfiddle.net/hdm7t60c/2/

<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>

Vue v-代表“属性或方法未定义”

1 个答案: