edit array inputs

pospi

Hi, I have this basic problem

I have vuex store :

const state = {
    preuverovaniForm: {
        loanAgreements: {
           '111111': {
              loanNumber: '111111',              
              product: '',
              note: ''
            },
            '222222': {
              loanNumber: '222222',
              product: '',
              note: ''
            },
        }
    }
}

const mutations = {
    updatePreuverovaniForm (state, payload) {
        Object.assign(state.preuverovaniForm, payload.update)
    }
}

const actions = {
    updatePreuverovaniForm ({ commit }, payload) {
        commit('updatePreuverovaniForm', payload)
    },
}

const getters = {
    preuverovaniForm: (state) => {
        return state.preuverovaniForm
    }
}

export default {
    namespaced: true, // vice stavu
    state,
    mutations,
    actions,
    getters
}

in vue view it is show as :

<q-tabs v-model="tab" :dense="dense">
   <q-tab v-for="(agreement, key) in preuverovaniForm.loanAgreements" v-bind:key="key" :name="agreement.loanNumber" :label="agreement.loanNumber" />
</q-tabs>
<q-tab-panels v-model="tab" class="custom-tab-panels" animated swipeable transition-prev="jump-up" transition-next="jump-up">
	<q-tab-panel v-for="(agreement, key) in preuverovaniForm.loanAgreements" v-bind:key="key" :name="agreement.loanNumber" class="row q-col-gutter-x-md q-col-gutter-y-lg q-pt-none q-pl-sm">
      <q-input v-model="agreement.loanNumber" label="Číslo uvěrové smlouvy" outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" :dense="dense" />
      <q-input v-model="agreement.product" label="Produkt" outlined class="col-xs-12 col-sm-4 col-md-3 col-lg-2" :dense="dense" />
      <q-input v-model="agreement.note" label="Poznámka" outlined class="col-12" type="textarea" :dense="dense" />
    </q-tab-panel>
</q-tab-panels>

and

<script>
import { defineComponent, ref } from 'vue';
import { mapGetters, mapActions } from "vuex";

export default defineComponent({
  name: 'Přeúvěrování',
  setup() {
    return {
      dense: true,
      loading_addNewAgreement: ref(false),
      loading_addChangeAgreement: ref(false),
      loading_addRemoveAgreement: ref(false),
      readonly: true, 
      newLoanBlankInputs: '',
    };
  },
  computed: {    
    ...mapGetters({
      preuverovaniForm: 'preuverovani/preuverovaniForm'
    })  
  },
  methods: {    
    ...mapActions('preuverovani', ['updatePreuverovaniForm','updateLoanAgreements'])
  }
});
</script>

My question is : How to do that if i write to <q-input v-model=“agreement.product”> or <q-input v-model=“agreement.note” label=“Poznámka”> it will be immediately updating loanAgreements array in store .

I will be very grateful for any help, thanks

No More Posting New Topics!

edit array inputs