[Vuejs]-Can I change v-switch toggle and label based on my data?

by

1👍

✅

Based on the vuejs2 tag I assume Vuetify 2 is being used here but you’re probably reading the Vuetify 3 docs because the modelValue property of <v-switch> is Vuetify 3 only. Here are the Vuetify 2 docs. With Vuetify 2 you should either use

v-model (two-way binding)

<v-switch 
  color="success" 
  v-model="item.status" 
  :label="item.status ? 'Delicious' : 'Nope'"
></v-switch>

This way the v-switch initial value will be the same as dessert.status and toggling the v-switch also updates dessert.status so they’re always synced.

input-value (one-way binding)

<v-switch
  color="success"
  :input-value="item.status"
  :label="item.status ? 'Delicious' : 'Nope'"
  @change="toggleMethod"
></v-switch>

This way the switch uses dessert.status for it’s initial value but they will not stay synced if either are changed. Usually also means the use of the @change event handler to do something based on the switch’s new value.

👤yoduh

Leave a comment