Maison > Questions et réponses > le corps du texte
Je suis nouveau sur vuejs. Le code affiché ci-dessous, isBtnDigitizePolygonClicked
是一个响应式变量。我试图在isBtnDigitizePolygonClicked
的值发生变化时执行一些代码作为副作用。为此,我使用了watch
, le code affiché ci-dessous.
Le problème que j'ai maintenant est que lorsque le code s'exécute, le message de journal dans onDigitizePolygon
方法,但在被观察的变量isBtnDigitizePolygonClicked
n'apparaît jamais malgré son appel, comme si l'observateur ne s'exécutait pas.
Veuillez me dire pourquoi cela se produit et comment y remédier.
Code :
let isBtnDigitizePolygonClicked = ref(true); ... ... watch: { isBtnDigitizePolygonClicked(newVal, oldVal) { console.log(debugTag, 'newVal:', newVal); console.log(debugTag, 'oldVal:', oldVal); if (digitizePolygonInteractions) { if (newVal == true) { digitizePolygonInteractions.remove(); } else { digitizePolygonInteractions.add(); } } else { throw new Error('WTF.digitizePolygonInteractions is:'); } }, immediate: false, }, computed: { compPropsIsBtnDigitizePolygonDisabled() { if (isBtnDigitizePolygonClicked.value == true) { return values.CONST_STRING_DIGITIZE; } else { return values.CONST_STRING_STOP_DIGITIZE; } }, }, methods: { onDigitizePolygon() { console.info(debugTag, 'onDigitizePolygon()'); isBtnDigitizePolygonClicked.value = !isBtnDigitizePolygonClicked.value; }, }
Modèle :
<button @click="onDigitizePolygon()">{{ compPropsIsBtnDigitizePolygonDisabled }}</button>
P粉4634184832023-09-15 16:47:05
En utilisant options-api vous pouvez directement écrire :
data() { return { isBtnDigitizePolygonClicked: true, } }Le contenu de
data() {..}
est automatiquement réactif.
Il n'est donc pas nécessaire d'utiliser
let isBtnDigitizePolygonClicked = ref(true);
P粉4251197392023-09-15 10:43:35
Je pense que mon erreur a été de ne pas avoir ajouté isBtnDigitizePolygonClicked
à la valeur de retour de `data()`
Code :
data() { return { isBtnDigitizePolygonClicked, } }