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