一、问题描述
如果将el-switch
组件的v-model
指令改为使用三元表达式时,会报出vue/valid-v-model
的错误,如下图所示:
二、原因分析
这是因为v-model
指令要求其绑定的值必须是一个合法的左值(LHS),而三元表达式则不能保证其返回值一定是一个左值。
三、解决方案
解决这个问题的方法是,将v-model
指令改为使用 :value
和@change
两个属性来分别绑定状态值和状态变更事件。
具体来说,你可以在el-switch
组件上使用:value
属性来绑定当前行数据中的状态值,使用@change
属性来指定状态变更事件的处理方法。示例代码如下:
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<el-switch
:value="switchValue(scope.row)"
@change="handleChange(scope.row, $event)"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
</el-table>
在上述代码中,我们首先使用了一个名为switchValue
的计算属性,来对 scope.row.status 进行转换,
在el-switch
组件中,我们将:value
属性绑定到switchValue(scope.row)
方法,以动态设置选中状态。
最后,我们在@change
事件中调用handleSwitchChange
方法,以处理状态变更事件。
export default {
data() {
return {
tableData: [
{ id: 1, name: "张三", status: 1 },
{ id: 2, name: "李四", status: 0 },
{ id: 3, name: "王五", status: 1 },
],
};
},
methods: {
handleSwitchChange(row) {
console.log("switch change:", row.status);
// 这里可以发送 API 请求,更新数据库中对应行的状态值
row.status = value ? 1 : 0; // 手动修改数据
},
},
computed: {
switchValue() {
return function(row) {
return row.status === 1;
};
},
},
};
</script>
在上述代码中,我们将计算属性改为普通函数,并且在调用时传入了row
数据。这样就能够正常获取到row
数据,并根据row.status
的值来返回开关的选中状态了。
需要注意的是,在handleSwitchChange
方法中仍然需要手动修改row.status
的值,并且如果该组件的 row.status
值从后端接口获取,需要在接口响应后先将tableData
中的数据更新,然后调用 this.$forceUpdate()
强制重新渲染页面,否则开关组件显示的状态不会随着row.status
的变化而变化。
四、可能出现的错误
使用:value
和@change
后,仍然不能切换switch开关状态,可能是因为计算属性中使用了箭头函数导致的
注意:箭头函数实际上绑定的作用域是全局作用域而不是**Vue**
实例,因此无法获取到正确的**row**
数据。为了解决这个问题,我们需要将计算属性改写为普通函数,并在调用时传入**row**
** 数据。**