Vue.js Detect Loop Model

Question

I have an array object in the data that looks like this.

generalLedgers: [{
           id: '',
           particulars: '',
           chart_account_id: '',
           debit_amount: 0,
           tax: 0,
           credit_amount: 0
},{
           id: '',
           particulars: '',
           chart_account_id: '',
           debit_amount: 0,
           tax: 0,
           credit_amount: 0
}]

Then I loop it in my template.

<div class="row" v-for="(gl, index) in generalLedgers" :key="index" >
        <div class="col-xs-2" v-if="transactionType.taccount_id !== 3">
            <q-select v-model="gl.item_id" filter :options="entityItems" float-label="Item" class="q-ml-sm"/>
        </div>

        <div :class="transactionType.taccount_id != 3 ? 'col-xs-3' : 'col-xs-5'">
            <q-input v-model="gl.particulars" float-label="Particulars" />
        </div>
        <div class="col-xs-3">
            <q-select v-model="gl.chart_account_id" filter :options="chartAccounts" float-label="GL account" clearable />
        </div>
</div>

It works fine without any errors. I can also detect in watchers using this.

generalLedgers: {
            handler: function (after, before) {

                console.log(after)
                this.totalAmount(after)
            },
            deep: true,
        },

The problem is I want to detect the gl.item_id if it changed. How can I detect it? I can only detect the generalLedgers.

Teddy · Accepted Answer · 2019-01-30T06:56:24.617

If you mean it is not "reacting" properly you can put item_id also in the data array.

generalLedgers: [{
           id: '',
           item_id: ','
           particulars: '',
           chart_account_id: '',
           debit_amount: 0,
           tax: 0,
           credit_amount: 0
},{
           id: '',
           item_id: ','
           particulars: '',
           chart_account_id: '',
           debit_amount: 0,
           tax: 0,
           credit_amount: 0
}]

If you want to watch it, you can access it as after[0].item_id.

Edit: You have to iterate through the whole array and find what has changed. Or, as recommended in the accepted answer, use a child component for each row, and watch for changes inside that component. This will solve the reactivity problem also.

Refer this: Vue - Deep watching an array of objects and calculating the change?

I add `item_id` in the array and it's not reacting in `watch` . — Rbex, Jan 30 '19 at 06:54

Vue.js Detect Loop Model

1 Answers1