Question

我正在Vue中创建一个简单的开关切换组件，该组件具有v模型和@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
        }
    },
};

Answer 1

该错误由以下语句触发：this.isSwitchOn = !this.isSwitchOn。您正在尝试为计算属性分配值，但未提供setter。

您需要按照以下方式定义计算属性，以使其分别作为getter和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
   }
}

Answer 2

默认情况下，计算属性仅是getter的，但是您也可以在需要时提供setter。选中official documentation

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

替代方式：

在您的父组件中：

<iswitch ref="switcher" @input="methodForInput" v-model="switchGender" @updated="handleUpdatedGender" />

methods: {
  methodForInput(event){
    this.$refs.switcher.isSwitchOn = event;
  }
}

在您的子组件中：

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

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

    data() {
      return {
        isSwitchOn: false
      };
    },

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

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

更新3：抱歉，最初没有包含父组件。

Answer 3

尝试如下设置模板。

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

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

已将计算属性分配给但没有设置程序-切换组件

3 个答案: