Tengo una tabla de datos con vuetify v-switch dentro. Cuando el usuario hace clic en v-switch, se alterna solo. Quiero restaurarlo al estado anterior cuando el usuario cancela el swal (alerta dulce). El interruptor debería volver a estar activo si está inactivo y viceversa.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <v-data-table :headers="headers" :items="users" item-key="pk" :loading="loading" hide-default-footer :items-per-page="i_per_page"> <template v-slot:item.switch="{ item }"> <v-tooltip bottom v-if="item.is_active=='active'"> <template v-slot:activator="{ on, attrs }"> <div v-bind="attrs" v-on="on"> <v-switch :id="String(item.user_id)" :loading='switchLoader' true-value="active" false-value="null" v-model="item.is_active" @click="toggle_status(item.user_id, item.is_active, $event)"></v-switch> </div> </template> <small v-if="item.is_active">Suspend</small> </v-tooltip> <v-tooltip bottom v-if="item.is_active=='null'"> <template v-slot:activator="{ on, attrs }"> <div v-bind="attrs" v-on="on"> <v-switch :loading='switchLoader' true-value="active" false-value="null" v-model="item.is_active" @click="toggle_status(item.user_id, item.is_active, $event)"></v-switch> </div> </template> <small>Activate</small> </v-tooltip> </template> </v-data-table> <script> methods: { toggle_status(user_id, value, e) { console.log(e) if (value == 'null') { this.action = '0' swal.fire({ title: 'Are you sure you want to deactivate user?', showDenyButton: true, confirmButtonText: `Deactivate`, denyButtonText: `Cancel` }).then(result => { if (result.isConfirmed) { this.toggle_user(user_id, value) } else { return false } }) } else if (value == 'active') { this.action = '1' swal.fire({ title: 'Are you sure you want to activate user?', showDenyButton: true, confirmButtonText: `Activate`, denyButtonText: `Cancel` }).then(result => { if (result.isConfirmed) { this.toggle_user(user_id, value) } else { return false } }) } } } </script>v-model es básicamente una etiqueta abreviada para value y @input . Debe manejar el cambio de entrada para v-switch por su cuenta, por lo que no debe usar v-model. Ahora los enlaces de v-model son diferentes para diferentes componentes. Por ejemplo, el componente Vuetify v-switch vincula v-model al input-value como podemos ver en la API: https://vuetifyjs.com/en/api/v-switch/#props-input-value
Básicamente, escribir v-model="item.is_active" es internamente lo mismo que :input-value="item.is_active" @change="item.is_active = $event.target.value"
Entonces puede reescribir su código como :input-value="item.is_active @change="toggle_status(item.user_id, item.is_active, $event)" (Tenga en cuenta que no debe usar el evento @click aquí, ya que puede activarse antes de que se actualice el valor de entrada)
Puede restablecer el interruptor v si el usuario cancela swal:
const i = this.users.findIndex((user) => user.user_id == user_id); this.users[i].is_active = e; swal.fire({ title: 'Are you sure you want to deactivate user?', showDenyButton: true, confirmButtonText: `Deactivate`, denyButtonText: `Cancel` }).then(result => { if (result.isConfirmed) { this.toggle_user(user_id, value) } else { const i = this.users.findIndex((user) => user.user_id == user_id); this.users[i].is_active = e == "active" ? "null" : "active"; // reset is_active if user cancels the swal } })¿Puedes probar los siguientes pasos?
Elimine el enlace del interruptor v ( v-model ) a item.is_active
En el método toggle_status , obtenga el valor actual a través del evento y cámbielo para que se vea así:
toggle_status: (event) { const value = event.target.value console.log('value: ', value) if (value === 'active') { ... // Insert the same code for the swall calls in here } } Y seguramente, en la <template> deberías estar haciendo esto <v-switch ... @click="toggle_status($event)"></v-switch>