当前位置：首页 > news >正文

Vue ‘v-model‘ directives require the attribute value which is valid as LHS.

news 来源：原创 2025/4/25 1:10:07

1、问题描述

在项目开发中，如果将el-checkbox组件的v-model指令改为使用三元表达式时，会报出【vue/valid-v-model】的错误，如下图所示：

2、分析原因

根据错误提示，是因为v-model指令始终把Vue实例的data视为数据真实的来源，要求其绑定的值必须是一个合法的值（LHS），而三元表达式则不能保证其返回值一定是一个HLS值，不能要求v-model一次性观察多个变量。

3、问题解决

知道具体原因了，那么解决这个问题的方法，是将v-model指令改为使用 :value 和 @change 两个属性来分别绑定状态值和状态变更事件。
具体来说，你可以在el-checkbox组件上使用:value属性来绑定当前行数据中的状态值，使用@change属性来指定状态变更事件的处理方法。示例代码如下：

上述代码中，我们首先使用了一个名为 checkboxValue 的计算属性，来对 item.checked 进行转换，
在el-checkbox组件中，我们将 :value 属性绑定到 checkboxValue(item.checked) 方法，动态改变选中状态。
最后，我们在 @change 事件中调用 checkboxChange() 方法，来处理状态变更事件。


<template>
   <li v-for="(item,index) in tableData" :key="index">
       <div class="content-item">
           <el-checkbox :value="checkboxValue(item.checked)" @change="checkboxChange(item,index,$event)">选择城市</el-checkbox>
       </div>
   </li>
</template>
export default {
  data() {
    return {
      tableData: [],
    };
  },

  computed: {
    checkboxValue() {
      return function(val) {
        return val === ''
      };
    },
  },

  methods: {
    checkboxChange(item,index,e) {
      console.log("checkboxchange:", item,index,e);
      // 这里可以发送 API 请求，更新数据库中对应行的状态值
      item.checked= e ? '' : '上海'
      this.$set(this.tableData,index,item); // 手动修改数据
    },
  },
};
</script>

4、总结

在上述代码中，我们将计算属性改为普通函数，并且在调用时传入了 item 数据。这样就能够正常获取到 item 数据，并根据 item.checked 的值来返回选中状态了。
需要注意的是，在 checkboxChange() 方法中仍然需要手动修改 item.checked 的值，并且如果该组件的 item.checked 值从后端接口中获取，则需要在接口响应后先将tableData中的数据更新，然后调用 this.$forceUpdate() 重新强制渲染页面，否则多选框组件显示的状态不会随着 item.checked 的变化而变化。