相关文章推荐
乐观的香菜  ·  Power ...·  1 年前    · 
开心的啤酒  ·  扩散模型(diffusion ...·  1 年前    · 
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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.

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>
                That worked well, What a shame. Many thanks!!  After that the tslint started to give me a warning [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives. that i've solved with a  <section v-for="text in texts" v-bind:key="text">(...)
– Paul N
                Aug 19, 2019 at 20:51
        

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.