toggleEnable(event) { let shouldEnable = event ? event.target.checked : false if (typeof event === 'boolean') { this.isEnabled = event; } if (shouldEnable !== this.autoCampaign.enabled) { this.updateSettings({ enabled: shouldEnable }) } }, <div id="switch-wrapper"> <span>enabled</span> <span class="switch"> <input name="auto_campaign[enabled]" type="hidden" value="0"> <input id="enabled" class="switch-input" type="checkbox" value="1" name="auto_campaign[enabled]" v-model="isEnabled" @change="toggleEnable" /> <label class="switch-paddle enable-button" for="enabled"></label> </span> </div>El problema con el código es El estado se muestra siempre como "habilitado", incluso si la palanca está desactivada. Pero necesito mostrar un mensaje separado ya que el estado debe estar "deshabilitado" cuando la palanca está en la posición APAGADO.
Vi que esto se puede lograr a través de v-if y v-else. pero no estoy seguro de cómo proceder
La implementación v-if y v-else será la siguiente.
Tenga en cuenta que v-else debe agregarse al siguiente de v-if o, de lo contrario v-else no funcionará.
Solo necesita depender de su valor v-model isEnabled . Esto se actualizará automáticamente cuando cambie la casilla de verificación. No necesita actualizarlo por separado a través de la función toggleEnable
new Vue({ el: "#app", data: { isEnabled: false }, methods: { toggleEnable(event) { // let shouldEnable = event ? event.target.checked : false // if (typeof event === 'boolean') { // this.isEnabled = event; // } // if (shouldEnable !== this.autoCampaign.enabled) { // this.updateSettings({ // enabled: shouldEnable // }) // } }, } }) <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <div id="app"> <div id="switch-wrapper"> <span v-if="isEnabled">enabled</span> <span v-else>disabled</span> <span class="switch"> <input name="auto_campaign[enabled]" type="hidden" value="0"> <input id="enabled" class="switch-input" type="checkbox" value="1" name="auto_campaign[enabled]" v-model="isEnabled" @change="toggleEnable" /> <label class="switch-paddle enable-button" for="enabled"></label> </span> </div> </div>