I'm currently working on developing a user feedback form that allows users to rate the quality of the food items they have ordered. I have an array called foodItems that displays the list of available food items along with predetermined reactions. My goal is to create a method where users can provide feedback by selecting only one reaction at a time. For example, for Pizza, they can choose to be either satisfied or dissatisfied, and their selected reaction should be highlighted accordingly. However, I'm unsure about how to implement this feature.
You can view a sample of my code on codepen.
Here's an example of how it works:
new Vue({
el: "#app",
data() {
return {
reaction: false,
selectedReaction: "",
foodItems: [{
name: "Pizza",
value: "pizza"
},
{
name: "Pasta",
value: "pasta"
}
]
};
},
methods: {
setReaction() {
this.reaction = !this.reaction;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b1d1e0e1f020d122b5a455e455a5f">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691f1c0c1d000f102958475c47585d">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout row wrap justify-center>
<v-flex xs6 v-for="(food,index) in foodItems" :key="index">
<h1>{{ food.name }}</h1>
<v-icon large left :color="reaction ? 'primary' : ''" @click="setReaction">sentiment_dissatisfied</v-icon>
<v-icon large :color="reaction ? 'primary' : ''" @click="setReaction">sentiment_very_satisfied</v-icon>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>Essentially, I want to enable users to rate the food items through this functionality. Any assistance would be greatly appreciated. Thank you!