javascript - Vue.js - v-for "egenskap eller metod är inte definierad"

Jag har ett problem som jag ser att verkligen många människor har men jag kan helt enkelt inte lösa det från de liknande frågor jag har hittat.

Jag använder en v-for i en Vue-komponent och värdet på arrayen ger mig alltid en varning som säger att variabeln saknas:

[Vue varning]: Egenskapen eller metoden "text" är inte definierad på instansen men refereras under renderingen. Se till att denna egenskap är reaktiv, antingen i data-alternativet, eller för klassbaserade komponenter, genom att initiera egenskapen.

Jag har skapat en jsfiddle för det:

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

Om jag ändrar {{text}} till {{texts[0]}} (se det i https://jsfiddle.net/hdm7t60c/3/) får jag bbbbb men det itererar inte och jag får felet också.

Detta är bara toppen av isberget på ett problem jag har, men kanske om jag löser detta kan jag få allt rätt.

Svar #1

Försök ta bort bindningstecknet : från v-for-direktivet, och du bör också ange nyckelattributet :

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