I am currently working on a Quasar application and utilizing VueX to manage the state of my app.
However, I am encountering an issue when trying to update properties within a for loop. Despite inputting values, they do not seem to be getting set in the state.
Can anyone provide guidance on how to trigger the mutations so that they are called whenever the v-model is changed?
<template>
<div class="row q-col-gutter-x-md">
<div v-for="(item, index) in items" name="items">
<h6 class="q-my-sm">Item {{index + 1}}</h6>
<q-select filled square borderless :v-model="item.prop1" label="Property 1*" :options="options" style="width: 100%;" behavior="menu" class="q-py-md text-subtitle1" />
<q-input filled square borderless :v-model="item.prop2" label="Property 2*" type="number" min="1" max="9999" style="width: 100%;" />
<q-input filled square borderless :v-model="item.prop3" label="Property 3*" type="number" min="5" max="90" style="width: 100%;" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: ['A', 'B', 'C', 'D']
}
},
computed: {
items: {
get() {
return this.$store.state.formInputs.items
},
set(value) {
this.$store.commit('formInputs/mutationItems', value)
}
}
},
methods: {
}
}
</script>
<style lang="scss">
</style>