属性或方法“foo”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保该属性是反应性的,无论是在数据选项中,还是对于基于类的组件。
我曾与 vuejs 合作过,现在我正在转向 typescript 面对这个问题,因为我试图访问一个简单的属性并使其具有反应性。
已经提出了类似的问题,但还没有解决方案: Vue Class Based Component Warning: Property is not defined on the instance but referenced during render
<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>
我已经尝试通过将属性添加为道具来解决此问题,但这给了我错误提示,那么尝试这个的正确方法是什么?
避免直接改变 prop,因为只要父组件重新渲染,该值就会被覆盖。相反,使用基于道具值的数据或计算属性。正在变异的道具:“foo”
@prop()
private foo: string;