javascript - vuejs bool Prop watch 不会触发

Question

我正在开发一个 vue cli 项目，其中项目有两个状态装备和未装备。

此状态由位于 Prop 中的 bool 值控制。由于您可以切换状态，因此我必须创建一个默认设置为 false 的数据 isEquipped。

然后我添加了一个观察者，但如果我的 props 设置为 True，它不会改变我的数据值。

这是代码

name: "Item",
        props: {
            Index : Number,
            name: String,
            desc : String,
            bonus: Array,
            equipped  : Boolean
        },
        data() {
            return {
                isEquipped : false
            }
        },
        watch: {
            equipped: function(stateEquipped) {
                this.isEquipped = stateEquipped;
            },
        },

例如，假设我创建了一个装备设置为 True 的新元素，watcher 没有触发并且 isEquipped 保持为 False，这有什么原因吗？

我遇到过多个类似的问题，比如这个 Vue @Watch not triggering on a boolean change，但没有一个对我有帮助

Answer 1

如果你想使用 watch 那么你可以尝试将它定义为:

equipped: {
    handler () {
        this.isEquipped = !this.isEquipped;
    },
    immediate: true
}

每当 equipped 的值发生变化时，这将更改 this.isEquipped 的值。