I have a vuetify v-btn-toggle like this:
<v-btn-toggle
v-model="toggle_values"
dense
multiple
>
<v-btn value="A">
A
</v-btn>
<v-btn value="B">
B
</v-btn>
<v-btn value="C">
C
</v-btn>
</v-btn-toggle>
But the binding v-model is an array. How could I trigger individual toggled event for buttons A, B, C like this:
data() {
return { toggle_values: [] }
},
computed: {
stateA: {
get() {
// get A value from other place
},
set(isPressed) {
// do something on A value changed
}
},
stateB: {
get() {
},
set(isPressed) {
}
},
stateC: {
get() {
},
set(isPressed) {
}
},
}
We have to create one method to read the state of buttons and other to set the state, all operations take place in the toggle_values.
data() {
return { toggle_values: [] }
},
methods: {
getToggleStateIsPressed: function (value) {
return this.toggle_values.indexOf(value) === -1 ? false : true;
},
setToggleState: function (value, press) {
if (press && this.toggle_values.indexOf(value) === -1) {
this.toggle_values.push(value);
} else if (!press) {
this.toggle_values = this.toggle_values.filter((val) => {
return val != value;
});
}
},
},
computed: {
stateA: {
get() {
return this.getToggleStateIsPressed("A");
},
set(isPressed) {
this.setToggleState("A", isPressed);
},
},
stateB: {
get() {
return this.getToggleStateIsPressed("B");
},
set(isPressed) {
this.setToggleState("B", isPressed);
},
},
stateC: {
get() {
return this.getToggleStateIsPressed("C");
},
set(isPressed) {
this.setToggleState("C", isPressed);
},
},
},
If you want to play with the values and see they changing, add this:
Model: {{ toggle_values }} <br />
A is pressed {{ getToggleStateIsPressed("A") }}<br />
B is pressed {{ getToggleStateIsPressed("B") }}<br />
C is pressed {{ getToggleStateIsPressed("C") }}<br />
<v-btn @click="stateA = !stateA">{{ getToggleStateIsPressed("A")?'unpress':'press' }} A</v-btn>
<v-btn @click="stateB = !stateB">{{ getToggleStateIsPressed("B")?'unpress':'press' }} B</v-btn>
<v-btn @click="stateC = !stateC">{{ getToggleStateIsPressed("C")?'unpress':'press' }} C</v-btn>
Hope it helps! ;)