如何处理’v-model’ directives require the attribute value which is valid as LHS问题？

问题起源

我在 el-table 内将el-switch组件的v-model指令改为使用三元表达式时，VScode 报出vue/valid-v-model的错误，如下图：

原因分析

因为v-model指令要求其绑定的值必须是一个合法的左值（LHS），而三元表达式则不能保证其返回值一定是一个左值。

解决方案

解决方案：将v-model指令改为使用:value和@change两个属性来分别绑定状态值和状态变更事件。

具体来说，就是在 el-switch 组件上使用:value属性来绑定当前行数据中的状态值，使用@change事件来指定状态变更的处理方法。示例代码如下：

<template v-slot:is_communicated="{ row }">
    <span>
        <el-switch
            v-loading="row.loading"
            :value="switchValue(row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-text="$t('btn_whether')"
            :inactive-text="$t('btn_not')"
            @change="handleSwitch(row)"
        >
        </el-switch>
    </span>
</template>

上面代码中，我们首先使用了一个名为switchValue的计算属性，来对 row.status 进行转换，在 el-switch 组件中，我们将:value属性绑定到switchValue(row)方法，以动态设置选中状态。最后，我们在@change事件中调用 handleSwitch 方法，以处理状态变更事件。

computed: {
    switchValue() {
      return function(row) {
        return row.is_communicated === 3;
      };
    },
},

在上述代码中，我们将计算属性改为普通函数，并且在调用时传入了 row 数据。这样就能够正常获取到 row 数据，并根据row.is_communicated的值来返回开关的选中状态了。

async handleSwitch(row) {
    row.loading = true
    const { ticket_id, is_communicated } = row
    try {
        await taskEditStatus({
          ticket_id,
          before_status: is_communicated,
          after_status: is_communicated === 2 ? 3: 2,
          operator: localStorage.getItem('userInfo')
        })
      this.$message.success(this.$t('pls_operate_successful') + '！')
      this.search()
    } catch (error) {
      this.$message.error(error)
    } finally {
      row.loading = false
    }
},

可能出现的错误

使用:value和@change后，仍然不能切换 switch 开关状态，可能是因为计算属性中使用了箭头函数导致的。

注意：箭头函数实际上绑定的作用域是全局作用域而不是 Vue 实例，因此无法获取到正确的 row 数据。为了解决这个问题，我们需要将计算属性改写为普通函数，并在调用时传入 row 数据。

以上关于如何处理’v-model’ directives require the attribute value which is valid as LHS问题？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。