vue.js 惰性监视程序不执行

lymnna71  于 2023-08-07  发布在  Vue.js
关注(0)|答案(2)|浏览(125)

我是新的vuejs.as在下面发布的代码中显示,isBtnDigitizePolygonClicked是一个React式变量。我试图执行一些代码行作为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>

noj0wjuj

noj0wjuj1#

我认为我的错误是,我没有将isBtnDigitizePolygonClicked添加到`data()'的返回中

编码

data() {
    return {
        isBtnDigitizePolygonClicked,
    }
}

字符串

zz2j4svz

zz2j4svz2#

使用options-api,你可以直接写:

data() {
    return {
        isBtnDigitizePolygonClicked: true,
    }
}

字符串
data() {..}中的内容是自动响应的。因此,没有必要

let isBtnDigitizePolygonClicked = ref(true);

相关问题