在 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。取消注释最后一个输入字段,您应该会看到错误。
你实际上做的不是将
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
更好的解决方案。