Estou usando o Vue 3 com API de opções.
Conforme mostrado no código postado abaixo, no watch
objeto, eu monitoro as alterações ocorridas em isToggleBtnLabelDigitizePolygon
. No método onDigitizePolygon
eu mudo o valor de isToggleBtnLabelDigitizePolygon
, porém, quando o valor deste último é alterado, a propriedade computada compPropsIsToggleBtnDigitizePolygon
é executada indicando a mudança de isToggleBtnLabelDigitizePolygon
, mas o watcher isToggleBtnLabelDigitizePolygon
nunca é executado, ou seja, as declarações de log dentro desse watcher nunca são executadas .
Para resolver esse problema, também tentei o seguinte
watch: {
'isToggleBtnLabelDigitizePolygon.value'(newVal, oldVal) {
console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)
if (newVal == true && oldVal == false) {
console.log(debugTag, 'removeDigitized()');
} else if (newVal == false && oldVal == true) {
console.log(debugTag, 'digitize()');
}
},
},
mas também não funcionou
Por que o observador não dispara e como consertar?
aplicativo.vue :
<template>
<button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
{{ compPropsIsToggleBtnDigitizePolygon }}
</button>
</template>
<script>
import { ref } from 'vue';
let isToggleBtnLabelDigitizePolygon = ref(true);
let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';
export default {
data() {
return {
btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
};
},
props: {
isBtnDigitizePolygonDisabled: {
type: Boolean,
default: false,
},
},
watch: {
isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)
if (newVal == true && oldVal == false) {
console.log(debugTag, 'removeDigitized()');
} else if (newVal == false && oldVal == true) {
console.log(debugTag, 'digitize()');
}
},
},
computed: {
compPropsIsToggleBtnDigitizePolygon() {
if (isToggleBtnLabelDigitizePolygon.value == true) {
return 'digitize'
} else {
return 'clear'
}
},
},
methods: {
onDigitizePolygon() {
isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
},
},
};
</script>
Vejo que você está tentando usar ref() com a propriedade de composição na API de opções. Se você corrigir sua sintaxe, o código funcionará corretamente. Espero poder ajudar.
Como exemplo de código:
ou você pode usar ref() na função de configuração como esta: