javascript - Vue: Actualizar una propiedad sincronizada dentro de un método
Estoy tratando de usar el patrón de propiedad sincronizada para poder compartir una propiedad única entre el padre y el hijo (así que usar un patrón como vuex me parece innecesario, como lanzar una bomba a una mosca). He logrado conectar propiedades sincrónicas de la siguiente manera:
Niño :
<template>
<v-btn @click="syncedProp = false"> Done </v-btn>
</template>
export default {
props: {
myProp: {
type: Boolean,
},
},
computed: {
syncedProp: {
get() {
return this.myProp
},
set(value) {
this.$emit('update:myProp', value)
},
},
},
}
Padre:
<template>
<Child :myProp.sync="parentProp"/>
</template>
export default {
data: function(){
return {
parentProp = ''
}
}
}
Esta estrategia ha funcionado para mí, hace lo que se espera de emitir el evento de modificar la propiedad desde el hijo para que el padre la actualice y el cambio se refleje en el hijo. Pero mi problema es que ahora la intención del hijo de modificar la propiedad quiero hacerla desde un método y no directamente. Esto significa (mira la línea @click):
Niño con método:
<template>
<v-btn @click="changeProperty(false)"> Done </v-btn>
</template>
export default {
props: {
myProp: {
type: Boolean,
},
},
computed: {
syncedProp: {
get() {
return this.myProp
},
set(value) {
this.$emit('update:myProp', value)
},
},
},
methods: {
changeProperty(value) {
this.syncedProp = value
}
}
}
Como puedes ver en el botón, llamo al método que actualiza la propiedad, el cual debería llamar al $emit. Pero con el método no lo hace, y sin el método directo sí. ¿Por qué es esto? ¿Cómo podría hacerlo con el método? Gracias.