Question

我遇到了一个似乎无法解决的错误。我有一个带有可选行的表。选中复选框后，“金额”列即会汇总。

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

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

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

已解决了该问题，但我相信有一种使用v模型的最佳方法，但我无法使其正常工作。我基本上是在获取数据，然后使用数据重新分配所选对象。

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

仅当复选框更改时，您才更新商户总数。您还应该更新商家总数，以防您的日期也更改。因为日期更改不会触发更改事件的复选框。

编辑
否，因为复选框更改事件仅在更改时才触发（单击它或手动触发）。您的vendorTotal不是计算所得的属性，因此对任何事物均不起作用。您可以尝试对其进行计算，实际上这是您要模仿的计算操作。

编辑
检查我创建的fiddle。像您的示例一样，所有工作都围绕着selected行。如果所选变量发生更改（在应用过滤器或选中或选中复选框之后），它将重新计算总数。在我的示例中，我使用产品代替商人，但在功能上却一样。

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

我认为这是Vue实施问题，但我认为问题出在Vuetify的数据表的工作范围内（根据您的情况）。

Answer 2

对不起，我不好。重新配制。

Vue在检测对象变化方面的反应性有局限性。这就是问题所在，因为日期选择器更改，您不知道卷阵列何时更改。您应该使用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>

取消注释该行的注释并尝试，您将看到区别。

Vue.js-表已更新，但选定的复选框数据未更新

2 个答案: