Tengo un vuetify v-btn-toggle como este:
<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>Pero el modelo v vinculante es una matriz. ¿Cómo podría activar un evento alternado individual para los botones A, B, C de esta manera?
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) { } }, }Tenemos que crear un método para leer el estado de los botones y otro para establecer el estado, todas las operaciones se realizan en 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); }, }, },Si quieres jugar con los valores y ver que cambian, agrega esto:
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>¡Espero eso ayude! ;)