title: Vue.js - v-for "property or method is not defined"
body: <p>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.</p>
  
  <p>I'm using a <code>v-for</code> in a Vue Component and the value of the array always gives me a warning saying that variable is missing:</p>
  
  <blockquote>
    <p>[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.</p>
  </blockquote>
  
  <p>I've created a <a href="https://jsfiddle.net/hdm7t60c/2/" rel="nofollow noreferrer">jsfidle</a> for it: </p>
  
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;section :v-for="text in texts"&gt;{{text}}&lt;/section&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import { Component, Vue } from "vue-property-decorator";
  
  @Component&lt;Map&gt;({
    data() {
      return {
        texts: ["bbbbb", "xxxxx"]
      };
    }
  })
  export default class Map extends Vue {}
  &lt;/script&gt;
  </code></pre>
  
  <p>If I change the <code>{{text}}</code> to <code>{{texts[0]}}</code> (see it in <a href="https://jsfiddle.net/hdm7t60c/3/" rel="nofollow noreferrer">https://jsfiddle.net/hdm7t60c/3/</a>) I get <code>bbbbb</code> but it doesn't iterate and I get the error too.</p>
  
  <p>This is the tip of the iceberg on a problem I'm having, but maybe if I solve this, I can get everything right.</p>