将多个表单输入绑定到 vuex 存储数组
Bind multiple form inputs to vuex store array
所以我在 Vuex 商店中有这个数组,我想将它的字段绑定到表单中的多个输入。我设法让这个工作的方式是这样的:
模板:
<b-form-input id="CustName2"
type="text"
v-model="CustName2" :maxlength="50"
placeholder="Nombre">
</b-form-input>
<b-form-input id="CustAddr"
type="text"
v-model="CustAddr" :maxlength="50"
placeholder="Dirección">
</b-form-input>
<b-form-input id="CustPostCode"
type="text"
v-model="CustPostCode" :maxlength="10"
placeholder="Cod. Postal">
</b-form-input>
计算:
computed: {
CustName2: {
get () {
return this.$store.state.orderproperties.CustName2
},
set (value) {
this.$store.commit('SetCustName2', value)
}
},
CustAddr: {
get () {
return this.$store.state.orderproperties.CustAddr
},
set (value) {
this.$store.commit('SetCustAddr', value)
}
},
CustPostCode: {
get () {
return this.$store.state.orderproperties.CustPostCode
},
set (value) {
this.$store.commit('SetCustPostCode', value)
}
}
}
store.js:
orderproperties: {
CustName2: '',
CustAddr: '',
CustPostCode: ''
}
问题是,现在我需要再添加 5 个属性(表单中再添加 5 个字段),我觉得我可以将单个计算的 属性 作为数组,然后绑定它表单中的每个字段;而不是为每个字段创建一个计算 属性。问题是 setter 不会将每个数组元素绑定到每个输入。关于如何重构这个的任何想法?现在,对于每个字段,我需要一个计算 属性、一个 Store 突变和一个 Store getter。
方法之一:
在store.js中添加通用突变
import Vue from 'vue'
export const mutations = {
updateProp: (state, payload) => {
const { prop, value } = payload
Vue.set(state.orderproperties, prop, value)
},
}
在方法中添加
methods {
onChange(prop, value) {
this.$store.commit('updateProp', {prop: prop, value: value})
},
getValue(prop) {
return this.$store.state.orderproperties[prop]
}
}
在模板中
<b-form-input id="CustName2"
type="text"
@change="onChange('CustName2', $event)"
:value="getValue('CustName2')"
:maxlength="50"
placeholder="Nombre">
<b-form-input id="CustAddr"
type="text"
@change="onChange('CustAddr', $event)"
:value="getValue('CustAddr')"
:maxlength="50"
placeholder="Dirección">
...
所以我在 Vuex 商店中有这个数组,我想将它的字段绑定到表单中的多个输入。我设法让这个工作的方式是这样的:
模板:
<b-form-input id="CustName2"
type="text"
v-model="CustName2" :maxlength="50"
placeholder="Nombre">
</b-form-input>
<b-form-input id="CustAddr"
type="text"
v-model="CustAddr" :maxlength="50"
placeholder="Dirección">
</b-form-input>
<b-form-input id="CustPostCode"
type="text"
v-model="CustPostCode" :maxlength="10"
placeholder="Cod. Postal">
</b-form-input>
计算:
computed: {
CustName2: {
get () {
return this.$store.state.orderproperties.CustName2
},
set (value) {
this.$store.commit('SetCustName2', value)
}
},
CustAddr: {
get () {
return this.$store.state.orderproperties.CustAddr
},
set (value) {
this.$store.commit('SetCustAddr', value)
}
},
CustPostCode: {
get () {
return this.$store.state.orderproperties.CustPostCode
},
set (value) {
this.$store.commit('SetCustPostCode', value)
}
}
}
store.js:
orderproperties: {
CustName2: '',
CustAddr: '',
CustPostCode: ''
}
问题是,现在我需要再添加 5 个属性(表单中再添加 5 个字段),我觉得我可以将单个计算的 属性 作为数组,然后绑定它表单中的每个字段;而不是为每个字段创建一个计算 属性。问题是 setter 不会将每个数组元素绑定到每个输入。关于如何重构这个的任何想法?现在,对于每个字段,我需要一个计算 属性、一个 Store 突变和一个 Store getter。
方法之一:
在store.js中添加通用突变
import Vue from 'vue'
export const mutations = {
updateProp: (state, payload) => {
const { prop, value } = payload
Vue.set(state.orderproperties, prop, value)
},
}
在方法中添加
methods {
onChange(prop, value) {
this.$store.commit('updateProp', {prop: prop, value: value})
},
getValue(prop) {
return this.$store.state.orderproperties[prop]
}
}
在模板中
<b-form-input id="CustName2"
type="text"
@change="onChange('CustName2', $event)"
:value="getValue('CustName2')"
:maxlength="50"
placeholder="Nombre">
<b-form-input id="CustAddr"
type="text"
@change="onChange('CustAddr', $event)"
:value="getValue('CustAddr')"
:maxlength="50"
placeholder="Dirección">
...