Bind multiple form inputs to vuex store array

Question

So I have this array in Vuex Store, and I want to bind it's fields to multiple inputs in a form. The way I manged to get this working is like this:

template:

            <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:

 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: ''
    }

The thing is, now I need to add 5 more properties (5 more fields to the form), and I feel like I could be getting a single computed property as an array, and then bind this to each field in the form; instead of creating a single computed property for each field. The problem is that the setter will not bind each array element to each input. Any ideas on how to refactor this? Right now, for each field I need a computed property, a Store mutation and a Store getter for each field.

Alan Millirud · Accepted Answer · 2021-05-03 15:29:11Z

1

one of approaches:

In store.js add universal mutation

import Vue from 'vue'

export const mutations = {
   updateProp: (state, payload) => {
     const { prop, value } = payload
     Vue.set(state.orderproperties, prop, value)
   },
}

in methods add

methods {
  onChange(prop, value) {
    this.$store.commit('updateProp', {prop: prop, value: value})
  },
  getValue(prop) {
    return this.$store.state.orderproperties[prop]
  }
}

in template

<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">

   ...

edited May 3, 2021 at 15:29

answered May 1, 2021 at 10:09

Alan Millirud

1,2129 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Casas Over a year ago

The approach is interesting, but I think something is missing here. There is no call to the universal mutation "updateProp" on the OnChange method; so it will throw an "unknown mutation type" error

Alan Millirud Over a year ago

@JackCasas. Sorry, it's my mistake. Function onChange updated

Collectives™ on Stack Overflow

Bind multiple form inputs to vuex store array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related