如何在 Vue 中进行动态 v-model 名称绑定

Question

在 Vue2 中，我正在使用 vuex-map-fields，它可以为保存在 Vuex 存储中的表单字段启用双向数据绑定。

我的地图字段看起来像这样-

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

我在我的模板中像这样使用它-

<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

组件写两次。所以，为了让它变得动态，我尝试了这样的东西-

// I want v-model to be resolved as 'A_grade' or '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

有什么办法可以根据地图字段的名称创建

v-model

？

我在这里设置了一个demo。取消注释最后一个输入字段，您应该会看到错误。

Answer 1

你实际上做的不是将

A_grade

或

B_grade

变量绑定到v-model，而是一个值为

A_grade

或

B_grade

的字符串。因为

fit + '_grade'

将转换为纯字符串，而不是对其中一个变量的引用。

完成这项工作的方法是在您的商店中创建一个带有两个键 A 和 B 的对象

grades

（我使用您沙盒中的代码）：

state: {
    grades: {
      A: "",
      B: ""
    },
    A_grade: "",
    B_grade: ""
},

现在在您的

app.vue

中，使用 mapFields 获取值。还要为您的数据添加一个变量

fit

，以使其在模板中可用。

export default {
  name: "App",
  mounted() {},
  data() {
    return {
      fit: "B",
    };
  },
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields(["A_grade", "B_grade", "grades"]),
  },
};

然后在您的模板中，您可以使用

grades

作为键将

fit

对象绑定到输入。像这样的东西：

<label>{{ fit }}: </label>
<input v-model="grades[fit]" />
<button @click="fit = fit === 'A' ? 'B' : 'A'">Toggle grade</button><br />
Grade A:{{ grades["A"] }} <br />
Grade B: {{ grades["B"] }} <br />
{{ grades }}<br />

我刚刚添加了一个按钮来切换

fit

，所以你可以看到它有效。

这行得通，但是我不知道这是否比仅在模板中使用

v-if

和

v-else

更好的解决方案。