我正在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.您正在尝试为计算的属性分配值,但未提供设置器.
原文链接：https://www.f2er.com/js/531204.html您需要按照以下方式定义计算属性,以使其作为获取器和设置器工作：
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
}
}
