首页 > javascript > 已分配计算属性,但它没有setter - 一个切换组件

已分配计算属性,但它没有setter - 一个切换组件 (Computed property was assigned to but it has no setter - a toggle component)

2019-03-11 javascriptvue.js

问题

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

[Vue警告]:已分配计算属性“isSwitchOn”,但它已经分配 没有二传手。

该组件应该像这样使用

<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。您正在尝试为计算属性分配值,但您没有提供setter

您需要定义您的计算属性,如下所示,它可以作为a getter和a setter

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

问题

I am creating a simple switch toggle component in Vue where it has a v-model and @updated. But I can't seem to change the model when the user toggles the switch. First I was getting the error to avoid mutating a prop directly. But now I am getting another error.

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

The component is meant to be used like this

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

Here is the component itself

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

解决方法

The error is triggered by this statement: this.isSwitchOn = !this.isSwitchOn. You are trying to assign a value to a computed property but you didn't provide a setter.

You need to define your computed property as follow for it to work as a getter and a setter:

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

Also, it is not advised to mutate a prop directly. What you could do is to add a new data property and sync it with the value prop using a watcher.

I think something like this will work:

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