[Vuejs]-Props not working in my Vue.js application

by

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

Leave a comment