Vue.js - 表格得到更新，但选中的复选框数据没有

Question

I've ran into a bug that I can't seem to solve. I have a table with selectable rows. When a checkbox is checked, the amount column is summed up.

But, when the data in the table changes using a datepicker, the merchant total on the right and the amount in the selected checkboxes object do not update and reflect what is in the table.

Below are two images illustrating what's happening.

Here is a codepen: https://codepen.io/anon/pen/NmKBjm

Solved the issue but I believe there's a more optimal method using v-model but I just can't get it to work. I'm basically fetching the data and then re-assigning the selected object with the data.

 this.volume = response.data; this.total = this.volume.reduce(function(p, n) { return p + parseFloat(n.amount); }, 0); let merchants = this.selected.map(m => m.merchantName); let filterMerchants = this.volume.filter(e => e ? merchants.includes(e.merchantName) : null); this.selected = filterMerchants; this.onCheckboxChange();

And here is my code.

 <v-data-table v-model="selected" id="transactions-volume-table" :headers="tableHeaders" :items="volume" item-key="merchantName" :loading="loading" :search="searchTable" hide-actions class="elevation-1"> <v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear> <template v-slot:items="props"> <td><v-checkbox v-model="props.selected" @change="onCheckboxChange" primary hide-details></v-checkbox></td> <td class="text-xs-left">{{ props.item.divisionName }}</td> <td class="text-xs-left">{{ props.item.merchantName }}</td> <td class="text-xs-left">£{{ props.item.amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}</td> </template> </v-data-table> data() { return { search: { fromDate: new Date().toISOString().substr(0, 10), toDate: new Date().toISOString().substr(0, 10) }, fromDateModal: false, toDateModal: false, searchTable: '', loading: true, volume: [], total: null, merchantTotal: 0, tableHeaders: [{ text: 'Select', sortable: false }, { text: 'Division', value: 'divisionName', sortable: true }, { text: 'Merchant', value: 'merchantName', sortable: true }, { text: 'Amount (£)', value: 'amount', sortable: true }], selected: [] } } onCheckboxChange() { console.log(this.selected); this.merchantTotal = this.selected.reduce(function(p, n) { return p + parseFloat(n.amount); }, 0); }

Answer 1

You update the merchant total only if a checkbox changes. You should update the merchant total in case your dates change as well. Because the date change it does not trigger a checkbox to change event.

EDIT
No, because the checkbox change event only gets triggered when it changes(click on it or manually fired). Your merchantTotal isn't a computed property so it isn't acting on anything. You can try and make it computed, actually it's a computed action you are trying to mimic.

EDIT
Check this fiddle I created. Like your example everything is working around the selected rows. In cases the selected variable changes (after applied filters or toggle a checkbox on or of) it will re-computed the total. In my example I use products in stead of merchants, but in function it's doing the same.

EDIT
Are you able to add a unique identifier foreach merchant in the dataset? Or you can create a ID based on 2 rows (division and merchantname). Its the only way around this is calculate the data via the volume (based on the selected merchant id or unique identifier, like I illustrated). Another way to do it is when data changes you unselect the merchants, but this is not really user friendly.

I thought it was a Vue implementation problem, but I think the problem lies within the working of the datatable from Vuetify (in your situation).

Answer 2

Sorry, my bad. Reformulation.

Vue has a limitation in reactivity to detect changes in objects. That is the problem, you can not know when your volume array change because datepicker changes. You should use this.$set to detect the changes in objects (an array is an object).

Link: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

This is a sample code:

<div id="app">
    {{ message[0] }}
    <button v-on:click="change">Change</button>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: [45,35,50]
        },
        methods: {
            change: function () {
                //this.$set(this.message, 0, 35);                    
                message[0] = 35;
                console.log(this.message);
            }
        }
    });
</script>

uncomment the line commented and try, you will see the difference.