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

Question

我遇到了一个似乎无法解决的错误。我有一个可选择行的表。当一个复选框被选中时，金额列被汇总。

但是，当使用日期选择器更改表格中的数据时，右侧的商户总数和所选复选框对象中的金额不会更新并反映表格中的内容。

下面是两张图片说明正在发生的事情。

这是一个代码笔： https://codepen.io/anon/pen/NmKBjm

解决了这个问题，但我相信使用 v-model 有一种更优化的方法，但我无法让它工作。我基本上是在获取数据，然后用数据重新分配选定的对象。

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();

这是我的代码。

<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

对不起，我的错。重新制定。

Vue 在检测对象变化的反应性方面存在限制。这就是问题所在，因为 datepicker 更改，您无法知道卷阵列何时更改。你应该使用 this.$set 来检测对象的变化（数组就是对象）。

链接：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

这是一个示例代码：

<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>

取消注释该行并尝试，您会看到不同。

Answer 2

仅当复选框更改时，您才更新商户总数。如果您的日期也发生变化，您应该更新商家总数。因为日期更改它不会触发复选框来更改事件。

编辑
不，因为复选框更改事件仅在更改时触发（单击它或手动触发）。您的 MercerTotal 不是计算属性，因此它不作用于任何东西。你可以试着让它计算，实际上它是你试图模仿的计算动作。

编辑
检查我创建的fiddle。就像您的示例一样，一切都围绕selected 行进行。如果所选变量发生变化（在应用过滤器或打开或关闭复选框后），它将重新计算总数。在我的示例中，我使用产品而不是商家，但在功能上也是如此。

编辑
您能否为数据集中的每个商家添加唯一标识符？或者，您可以基于 2 行（部门和商家名称）创建一个 ID。解决此问题的唯一方法是通过数量计算数据（基于所选的商家 ID 或唯一标识符，如我所示）。另一种方法是在数据更改时取消选择商家，但这并不是真正的用户友好。

我认为这是一个 Vue 实现问题，但我认为问题在于 Vuetify 的数据表的工作（在您的情况下）。