Vue.js - v-for "property or method is not defined"

Question

I'm having a problem that I see really lots of people having but I simple can't solve it from the similar questions I've found.

I'm using a v-for in a Vue Component and the value of the array always gives me a warning saying that variable is missing:

[Vue warn]: Property or method "text" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I've created a jsfidle for it:

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

If I change the {{text}} to {{texts[0]}} (see it in https://jsfiddle.net/hdm7t60c/3/) I get bbbbb but it doesn't iterate and I get the error too.

This is the tip of the iceberg on a problem I'm having, but maybe if I solve this, I can get everything right.

Answer 1

Try to remove the binding sign : from v-for directive, and you should also specify the key attribute :

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