How to update Vuex store from v-model input in case of v-for - vue.js

Question

I've say 10 objects in an array like
policies = [{name:'a',text:''},{name:'b',text:''},....]
They're iterated using v-for to show label A: Inputbox with text property binded as v-model.
I want to trigger a mutation whenever a policy's text changes in v-model.
Here's the fiddle link for it.
https://jsfiddle.net/dmf2crzL/41/

Answer 1

We assume you want to use v-model for a 2-way binding along with Vuex store.
Your problem is that you want Vuex store in strict mode.
const store = new Vuex.Store({
// ...
strict: true
})
so all of your mutation should go through Vuex store and you can see it in Vue.js devtools.
Method 1: We can avoid the Vuex error by using the cloned object and use watcher to commit the mutation.
const store = new Vuex.Store({
strict: true,
state: {
formdata: [
{ label: 'A', text: 'some text' },
{ label: 'B', text: 'some other text' },
{ label: 'C', text: ' this is a text' }
]
},
mutations: {
updateForm: function (state, form) {
var index = state.formdata.findIndex(d=> d.label === form.label);
Object.assign(state.formdata[index], form);
}
}
});
new Vue({
el: '#app',
store: store,
data () {
return {
//deep clone object
formdata: JSON.parse(JSON.stringify(this.$store.state.formdata))
};
},
computed: {
formdata() {
return this.$store.state.formdata
}
},
watch: {
formdata: function(form)
this.$store.commit('updateForm', form);
}
}
})
Method 2: You can use computed get/set to commit your mutation as per the vuex doc
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}

Answer 2

another way that I found useful:
replace the v-model to a (v-on) function
that function triggers a mutation
the mutation ("function" in the store) change a value in state
a getter ("computed" in the store) "listens" to the change in the property value and changes accordingly.
this is an example of how to filter cards with Vuex (instead of v-model:
input that triggers a function "updateFilter":
<input type="text" placeholder="filter" v-on:input='updateFilter'>
a function (method) that triggers a mutation (commit):
methods: {
updateFilter(event){
this.$store.commit('updateFilter', event.target.value);
}
in the store.js, a mutation that changes data (state):
mutations: {
updateFilter (state, filter) {
state.filter = filter;
},
the state:
state: {filter: ""}
and the getter (computed) that "listens" to the change in the state.
getters: {
filteredGames: state => {
//your filter code here
return filtered;
})
},
and finally, the component that needs to be filtered has this computed (getter):
computed: {
filtered() {
return this.$store.getters.filteredGames;
}

Answer 3

Mine library vuex-dot simplifies reactivity (and, sure, v-model) usage on vuex store
https://github.com/yarsky-tgz/vuex-dot
<template>
<form>
<input v-model="name"/>
<input v-model="email"/>
</form>
</template>
<script>
import { takeState } from 'vuex-dot';
export default {
computed: {
...takeState('user')
.expose(['name', 'email'])
.dispatch('editUser')
.map()
}
}
</script>