javascript-计算属性已分配给它,但没有设置器-切换组件

我正在Vue中创建一个简单的开关切换组件,该组件具有v模型和@updated.但是当用户切换开关时,我似乎无法更改模型.首先,我遇到了错误,以避免直接更改道具.但是现在我又遇到了另一个错误.

[Vue warn]: Computed property “isSwitchOn” was assigned to but it has
no setter.

该组件旨在像这样使用

<iswitch v-model="switchGender" @updated="handleUpdatedGender" />

这是组件本身

export default {
    template: `
        <span
            @click="toggleSwitch"
            :class="{ active: isSwitchOn }">

            <span class="toggle-knob"></span>
        </span>
    `,

    props: ['value'],

    methods:
    {
        toggleSwitch()
        {
            this.isSwitchOn = !this.isSwitchOn

            this.$emit('input', this.isSwitchOn)
            this.$emit('updated')
        }
    },

    computed:
    {
        isSwitchOn()
        {
            return this.value
        }
    },
};

解决方法:

错误由以下语句触发：this.isSwitchOn =！this.isSwitchOn.您正在尝试为计算的属性分配值,但未提供设置器.

您需要按照以下方式定义计算属性,以使其作为获取器和设置器工作：

computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.value
        },
        set(value)
        {
            this.value = value
        }
    }
}

另外,不建议直接更改道具.您可以做的是添加一个新的数据属性,并使用观察程序将其与value属性同步.

我认为类似这样的方法会起作用：

props: ['value'],
data()
{
    return {
       val: null
    }
},
computed:
{
    isSwitchOn:
    {
        get()
        {
            return this.val
        },
        set(value)
        {
            this.val = value
        }
    }
},
watch: {
   value(newVal) {
       this.val = newVal
   }
}

标签：vue-js,javascript
来源： https://codeday.me/bug/20191211/2105799.html