javascript - 道具在我的 Vue.js 应用程序中不起作用
问题描述
我正在开发一个原型,所以一些字段是硬编码的。我可以知道为什么下面会抛出错误吗?
vue.runtime.esm.js:587 [Vue warn]: Property or method "A" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Recommendation> at components/Recommendations.vue
<HomePage> at pages/profile.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
推荐.vue
<template>
<div class="recommendations">
<div class="recommendations__content">
<AppOption :selected="A"></AppOption>
<AppOption :selected="B"></AppOption>
<AppOption :selected="C"></AppOption>
</div>
</div>
</template>
<script>
import AppOption from '@/components/Option.vue'
export default {
name: 'Recommendation',
components: {
AppOption
},
data() {
return {
}
}
}
</script>
选项.vue
<template>
<div>
<b-field>
<b-select
placeholder="Select skill"
v-model="current"
size="is-medium"
expanded>
<template v-for="option in options">
<option :value="option.value" v-bind:key="option.value">{{ option.title }} </option>
</template>
</b-select>
</b-field>
<div class="recommendations__content__row">
<div class="fieldset">
<label>Current:</label>
**<input type="text" value="6.0" disabled>**
</div>
<div class="fieldset">
<label>Goal:</label>
<input type="text" value="8.0">
</div>
</div>
</div>
</template>
<script>
export default {
props: ['selected'],
data() {
return {
current: this.selected,
options: [
{ title: 'Skill A', value: 'A', points: 6},
{ title: 'Skill B', value: 'B', points: 5},
{ title: 'Skill C', value: 'C', points: 4}
]
}
}
}
</script>
另外,如何根据父页面选择的内容将 Option.vue 中以“**”突出显示的部分更新为 JSON 中的“点”?
解决方案
发生这种情况是因为在您的 Recommendations.vue 中您引用了 A、B 和 C 变量,但您没有在数据部分声明它们。
因此,如果您希望它们成为变量,则需要声明它们:
export default {
name: 'Recommendation',
components: {
AppOption
},
data() {
return {
A: 'A',
B: 'B',
C: 'C',
}
}
}
或者,如果您只想使用 A、B 和 C 作为值,那么您不需要绑定:。文档
<AppOption selected="A"></AppOption>
<AppOption selected="B"></AppOption>
<AppOption selected="C"></AppOption>
推荐阅读
- javascript - Chrome 和 Edge 中的 XHR 和 302 重定向
- html - 字体未按预期显示,为什么我的 i 顶部不是圆角的?
- python - 如何记录迭代器产生 n 次或零次?
- jenkins - 无法在 vagrant 虚拟机中从 Jenkins 管道运行 terraform
- javascript - Javascript 数组长度返回 0
- python-3.x - 从 Ubuntu 18.04 上的 anaconda 开始
- android - LocalBroadcastManager 已被弃用。我应该用什么代替它?
- asp.net-core - .NET 核心 3.1 ApplicationInsight IntrumentKey null
- php - 如何在 Braintree-Google Pay 集成中验证客户令牌?
- ruby-on-rails - 令牌寿命不适用于设计身份验证令牌宝石并在 Rails 葡萄 api 中设计