主页 / user-1652954

Amrmsmb's questions

Martin Hope
Amrmsmb
Asked: 2023-08-24 21:24:01 +0800 CST
  • 6

我正在使用带有选项 API 的 Vue 3。

如下面发布的代码所示，在watch对象中，我监视 发生的更改isToggleBtnLabelDigitizePolygon。在方法中onDigitizePolygon，我更改了 的值isToggleBtnLabelDigitizePolygon，但是，当后者的值更改时，计算属性被执行，compPropsIsToggleBtnDigitizePolygon指示 的更改isToggleBtnLabelDigitizePolygon，但观察程序isToggleBtnLabelDigitizePolygon永远不会执行，换句话说，该观察程序内部的日志语句永远不会执行。

为了解决这个问题，我还尝试了以下方法

watch: {
    'isToggleBtnLabelDigitizePolygon.value'(newVal, oldVal) {
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

        if (newVal == true && oldVal == false) {
            console.log(debugTag, 'removeDigitized()');
        } else if (newVal == false && oldVal == true) {
            console.log(debugTag, 'digitize()');
        }
    },
},

但它也不起作用

为什么观察者不触发以及如何修复？

应用程序.vue：

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
import { ref } from 'vue';

let isToggleBtnLabelDigitizePolygon = ref(true);

let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal == true && oldVal == false) {
                console.log(debugTag, 'removeDigitized()');
            } else if (newVal == false && oldVal == true) {
                console.log(debugTag, 'digitize()');
            }
        },
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            if (isToggleBtnLabelDigitizePolygon.value == true) {
                return 'digitize'
            } else {
                return 'clear'
            }
        },
    },
    methods: {
        onDigitizePolygon() {
            isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
        },
    },
};
</script>
vue.js