Just starting out with vue.js, I am attempting to create a component that functions in the following way:
I have four buttons and when I click on one button, I want to change the colors of all four buttons and send a prop to a child component indicating which button I selected.
This is what I have so far:
<template>
<v-app>
<v-toolbar app>
<v-toolbar-title class="headline text-uppercase">
<v-flex>
<v-btn class="mx-2" icon large>
<v-icon dark @click="reloadPage" >home</v-icon>
</v-btn>
<v-btn class="ma-2" :ref="ModelA" :modelProps="modelA" @click="chooseModel(0)" rounded flat text > MODEL A </v-btn>
<v-btn class="ma-2" :ref="ModelB" :modelProps="modelB" @click="chooseModel(1)" rounded flat text > MODEL B </v-btn>
<v-btn class="ma-2" :ref="ModelC" :modelProps="modelC" @click="chooseModel(2)" rounded flat text > MODEL C </v-btn>
<v-btn class="ma-2" :ref="ModelD" :modelProps="modelD" @click="chooseModel(3)" rounded flat text > MODEL D </v-btn>
</v-flex>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<childComponent/>
</v-content>
</v-app>
</template>
<script>
import childComponent from './components/childComponent'
export default {
name: 'App',
components: {
childComponent
},
data () {
return {
}
},
methods: {
chooseModel:function(model){
switch(model){
case 0:
this.$refs["ModelA"][0].color = "rgb(0, 100, 0)";
this.$refs["ModelB"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelC"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelD"][0].color = "rgb(100, 0, 0)";
break;
case 1:
this.$refs["ModelA"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelB"][0].color = "rgb(0, 100, 0)";
this.$refs["ModelC"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelD"][0].color = "rgb(100, 0, 0)";
break;
case 3:
this.$refs["ModelA"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelB"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelC"][0].color = "rgb(0, 100, 0)";
this.$refs["ModelD"][0].color = "rgb(100, 0, 0)";
break;
case 4:
this.$refs["ModelA"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelB"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelC"][0].color = "rgb(100, 0, 0)";
this.$refs["ModelD"][0].color = "rgb(0, 100, 0)";
break;
}
}
}
}
</script>
What am I doing wrong here and what can I do to fix it?