Vue2中如何基于vuex-map-fields实现动态v-model名称绑定？

我在Vue2项目中使用vuex-map-fields实现Vuex存储中表单字段的双向数据绑定，当前mapFields配置如下：

...mapFields("myModule", {
  A_grade: "obj.A_grade",
  B_grade: "obj.B_grade",
}),

模板中通过v-if/v-else分别渲染两个v-select组件：

<v-select v-if="someCondition" v-model="A_grade" :items="items"></v-select>
<v-select v-else v-model="B_grade" :items="items"></v-select>

该实现可正常工作，但需要重复编写v-select组件。为实现动态绑定，我尝试如下写法：

<!-- 期望v-model解析为'A_grade'或'B_grade' -->
<v-select v-model="fit + '_grade'" :items="items"></v-select>

对应的脚本代码：

export default {
  data() {
    return {
      fit: null,
    }
  },
  computed: {
    ...mapFields("myModule", {
      A_grade: "obj.A_grade",
      B_grade: "obj.B_grade",
    }),
  },
  mounted() {
    this.fit = this.someCondition ? 'A' : 'B'
  }
}

但出现语法错误：Assigning to rvalue，ESLint报错：'v-model' directives require the attribute value which is valid as LHS。请问是否有办法基于mapFields的名称创建动态v-model？

解决方案 #

方法1：新增动态计算属性 #

通过自定义计算属性，根据fit的值动态映射对应的Vuex字段，同时实现双向绑定：

export default {
  data() {
    return {
      fit: null,
    }
  },
  computed: {
    ...mapFields("myModule", {
      A_grade: "obj.A_grade",
      B_grade: "obj.B_grade",
    }),
    // 动态双向绑定的计算属性
    dynamicGrade: {
      get() {
        return this[`${this.fit}_grade`];
      },
      set(value) {
        this[`${this.fit}_grade`] = value;
      }
    }
  },
  mounted() {
    this.fit = this.someCondition ? 'A' : 'B'
  }
}

模板中直接绑定这个计算属性：

<v-select v-model="dynamicGrade" :items="items"></v-select>

方法2：模板中直接使用对象访问语法 #

Vue模板支持通过方括号访问实例属性，直接动态拼接字段名实现绑定：

<v-select v-model="this[fit + '_grade']" :items="items"></v-select>

模板中可省略this，简化为：

<v-select v-model="[fit + '_grade']" :items="items"></v-select>

注意确保fit已在mounted中完成赋值，避免出现undefined_grade的无效字段名。

内容的提问来源于stack exchange，提问作者Neha Soni