1π
β
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;
}
}
π€Danijel
2π
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>
π€Aldarund
Source:stackexchange.com