Inaktive Zuschauer handeln nicht
P粉373596828
P粉373596828 2023-09-14 17:33:51
0
2
547

Ich bin neu bei vuejs. Der unten gezeigte Code, isBtnDigitizePolygonClicked是一个响应式变量。我试图在isBtnDigitizePolygonClicked的值发生变化时执行一些代码作为副作用。为此,我使用了watch, der unten gezeigte Code.

Das Problem, das ich jetzt habe, ist, dass bei der Ausführung des Codes die Protokollmeldung in onDigitizePolygon方法,但在被观察的变量isBtnDigitizePolygonClicked trotz Aufruf nie angezeigt wird, als ob der Beobachter nicht ausgeführt würde.

Bitte sagen Sie mir, warum das passiert und wie ich es beheben kann.

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

Vorlage:

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

Antworte allen(2)
P粉463418483

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

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

data() {..} 中的内容会自动响应式。 因此,不需要使用

let isBtnDigitizePolygonClicked = ref(true);
P粉425119739

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

代码:

data() {
    return {
        isBtnDigitizePolygonClicked,
    }
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage