Property or method "foo" 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.
Я работал с vuejs, теперь я перехожу на машинописный текст, столкнувшись с этой проблемой из-за попытки получить доступ к простому свойству и сделать его реактивным.
Был задан аналогичный вопрос, но решения пока нет: Предупреждение о компонентах на основе классов Vue: свойство не определено в экземпляре, но на него ссылаются во время рендеринга
<template>
<section class = "dropdown" style = "background-color: #dde0e3">
<select class = "btnList" v-model = "foo">
<option v-for = "item in selectedfooData" :value = "item" :key = "item.id">{{item}}</option>
</select>
{{foo}}
</section>
</template>
<script lang = "ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
private foo: string;
private selectedfooData : string[] = [
'one',
'two'
]
}
</script>
Я попробовал обходной путь, добавив свойство в качестве опоры, но это дает мне ошибку, говоря: Итак, как правильно это попробовать?
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "foo"
@prop()
private foo: string;
Это подход class based
, поэтому здесь присутствует no data object
, нам нужно определить конструктор. @ Capt.Teemo
Вот решение этой проблемы, нужно добавить конструктор и инициализировать свойство в конструкторе
<template>
<section class = "dropdown" style = "background-color: #dde0e3">
<select class = "btnList" v-model = "foo">
<option v-for = "item in selectedfooData" :value = "item" :key = "item.id">{{item}}</option>
</select>
{{foo}}
</section>
</template>
<script lang = "ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
private foo: string;
private selectedfooData : string[] = [
'one',
'two'
]
construtor() {
super();
this.foo = '';
}
}
</script>
вы пробовали добавить
foo
в объект vuedata
?