Pemerhati yang tidak aktif tidak bertindak

Question

Saya baru menggunakan vuejs. Kod yang ditunjukkan di bawah, isBtnDigitizePolygonClicked是一个响应式变量。我试图在isBtnDigitizePolygonClicked的值发生变化时执行一些代码作为副作用。为此，我使用了watch, kod yang ditunjukkan di bawah.

Masalah yang saya hadapi sekarang ialah apabila kod dijalankan, mesej log dalam onDigitizePolygon方法，但在被观察的变量isBtnDigitizePolygonClicked tidak pernah muncul walaupun dipanggil, seolah-olah pemerhati tidak melaksanakan.

Sila beritahu saya mengapa ini berlaku dan cara membetulkannya.

Kod:

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;
    },
}

Templat:

<button @click="onDigitizePolygon()">{{ compPropsIsBtnDigitizePolygonDisabled }}</button>

Answer 1

Menggunakan pilihan-api anda boleh terus menulis:

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

Kandungan dalam

data() {..} adalah responsif secara automatik. Oleh itu, tidak perlu menggunakan

let isBtnDigitizePolygonClicked = ref(true);

Answer 2

Saya rasa kesilapan saya ialah saya tidak menambah isBtnDigitizePolygonClicked pada nilai pulangan `data()`

Kod:

data() {
    return {
        isBtnDigitizePolygonClicked,
    }
}