es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Actualizar los métodos set/get en Vue.js

06 Jun, 2023 Programación

Tienes un componente padre y un componente hijo:

Padre:

<v-toggle-button :defaultState='false' @change='triggerToggleEvent' id='order' ref='toggleOrder'/>

Botón de reinicio: :

<button class='filter-content__button-clear' @click='
       $refs.brands.reset($event), 
       reset(),
       $refs.toggleOrder.reset($event)
      '
      >
       reset
     </button>

Hijo Vue:

props: {
  defaultState: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: 'primary'
  }
},
data() {
  return {
    currentState: this.defaultState
  };
},
computed: {
  isActive() {
    return this.currentState;
  },
  checkedValue: {
    get() {
      return this.defaultState;
    },
    set(newValue) {
      this.currentState = newValue;
      this.$emit('change', newValue);
    }
  }
},
methods: {
  reset() {
    this.currentState = this.defaultState;
  }
}

¿Es posible actualizar los setters? Este es el botón de interruptor y necesito restablecer el interruptor a su valor predeterminado cuando presiono el botón de reinicio.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible actualizar los setters en el componente hijo dado. El método set de la propiedad calculada checkedValue es responsable de actualizar el estado del componente. En el método reset, podemos establecer el currentState al defaultState, lo que restablecerá el botón interruptor al estado predeterminado.

    Así es cómo podemos actualizar el método set en la propiedad calculada checkedValue:

    set(valorNuevo) {
  this.currentState = valorNuevo;
  if (valorNuevo === this.defaultState) {
    this.$refs.toggleButton.checked = this.defaultState;
  }
  this.$emit('change', valorNuevo);
}

    En el método reset, podemos establecer el currentState al defaultState y actualizar el estado del botón interruptor utilizando su referencia.

    reset() {
  this.currentState = this.defaultState;
  this.$refs.toggleButton.checked = this.defaultState;
}

    Al hacerlo, cada vez que se hace clic en el botón de restablecimiento, se llamarán a ambos métodos reset en el componente hijo y en el componente padre, lo que restablecerá el botón interruptor a su estado predeterminado.

Comments are closed.