‘v-model‘ directives require the attribute value which is valid as LHS vue/valid-v-model

一、问题描述

如果将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**** 数据。**

这篇好文章是转载于：学新通技术网