[Vuejs]-Issue while binding the dynamic form field with v-model

by

1👍

✅

To manage two way binding to the state in a loop, I think you’ll need to avoid v-model. Instead, you probably want to call a mutation on the change event. So your input will look like this:

<div class='col-3' v-for='(col, index) in columns' :key='col.id'>
<input
  standard
  type='text'
  :label='capital_letter(col.label)'
  :value="col.name"
  @input="changeColumn($event, index)"
>
</div>

Notice that we’re passing in the index from the loop, so you can target the appropriate column in the method below.
Then, in methods:

changeColumn(event, index) {
    this.$store.commit('updateColumn', {i: index, value: event.target.value})
}

Then, using the payload object, change the appropriate column in your store (put this in mutations in the store):

updateColumn(state, payload) {
    state.columns[payload.i].name = payload.value
}

Remember that in your view, you’ll also need “…mapMutations([‘updateColumn’])” etc…

You can read more about v-model with the state in the Vuex docs:
https://vuex.vuejs.org/guide/forms.html

👤Teddy Michels

Leave a comment