I am developing a prototype so some of the fields are hardcoded. May I know why is the below throwing errors?
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://v2.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>
Recommendations.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>
Option.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>
Also how do i update the part highlighted with "**" in Option.vue to "points" from the JSON based on what the parent page selected?
It happens because in your Recommendations.vue you are referencing A, B and C variables, but you dont declare them in data section.
So if you want them to be variables you need to declare them:
export default {
name: 'Recommendation',
components: {
AppOption
},
data() {
return {
A: 'A',
B: 'B',
C: 'C',
}
}
}
Or if you wanted to just use A, B and C as values then you dont need binding : . Docs
<AppOption selected="A"></AppOption>
<AppOption selected="B"></AppOption>
<AppOption selected="C"></AppOption>
On this part
<AppOption :selected="A"></AppOption>
<AppOption :selected="B"></AppOption>
<AppOption :selected="C"></AppOption>
You have to define A, B, C property or data. For example, add
data() {
return {
A: '',
B: '',
C: '',
}
}
For the second part, best approach would be to add a computed property.
computed: {
selectedPoints() {
return this.current.points
}
}
And add
**<input type="text" :value="selectedPoints" disabled>**
On this second part, you can also use v-model if you find it more appropriate for your use case.
UPDATE by @yeeen: I used a for loop instead to get the points i want. Explanation in the comments
computed: {
selectedPoints() {
for(let i=0; i<this.options.length; i++) {
console.log(this.options[i]);
if (this.options[i].value == this.current)
return this.options[i].points
}
return 0;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.