我是新的vuejs。如下所示的代码,isBtnDigitizePolygonClicked是一个响应式变量。我试图在isBtnDigitizePolygonClicked的值发生变化时执行一些代码作为副作用。为此,我使用了watch,如下所示的代码。
我现在遇到的问题是,当代码执行时,尽管调用了onDigitizePolygon方法,但在被观察的变量isBtnDigitizePolygonClicked中的日志消息从未显示出来,就好像观察者没有执行。
请告诉我为什么会发生这种情况以及如何解决。
代码:
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;
},
}
模板:
<button @click="onDigitizePolygon()">{{ compPropsIsBtnDigitizePolygonDisabled }}</button> Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用 options-api,您可以直接编写:
data() { return { isBtnDigitizePolygonClicked: true, } }data() {..}中的内容会自动响应式。 因此,不需要使用我认为我的错误在于,我没有将
isBtnDigitizePolygonClicked添加到`data()`的返回值中代码:
data() { return { isBtnDigitizePolygonClicked, } }