v-data-table 不会更新新数据

Question

我在 Vuex 商店中有一个对象 portfoliosData。这个对象有一个属性metrics

  state: {
    portfoliosData: {
      performance: [],
      metrics: []
    },

在执行操作时，我改变了商店中的属性并希望在表格中显示更新。

 <div id="amsample">
  <div id="chartdiv"></div>
   <v-tabs-items  :touchless="true">
      <v-tabs-content :key="0" id="tab-1">
        <v-card flat>
          <v-card-text>
            Return Performance
            <v-data-table
              :headers="headers"
              :items="metrics"
              :custom-sort="sortPercentage"
              hide-actions
              class="elevation-1"
            >
              <template slot="items" scope="props">
                <td>{{ props.item.name }}</td>
                <td class="text-xs-right">{{ props.item.acRet }}</td>
                <td class="text-xs-right">{{ props.item.anRet }}</td>
                <td class="text-xs-right">{{ props.item.anVol }}</td>
                <td class="text-xs-right">{{ props.item.maxDd }}</td>
                <td class="text-xs-right">{{ props.item.sRatio }}</td>
                <td class="text-xs-right">{{ props.item.inRatio }}</td>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-tabs-content>
    </v-tabs-items>
 </div>

在组件表中观察metrics变量。

data() {
      return {

        headers: [
          {text: 'Measure', value: 'name', sortable: false},
          {text: 'Accumulative Return', value: 'acRet'},
          {text: 'Annual Return', value: 'anRet'},
          {text: 'Annual Volatility', value: 'anVol'},
          {text: 'Max Drawdown', value: 'maxDd'},
          {text: 'Sharpe Ratio', value: 'sRatio'},
          {text: 'Information Ratio', value: 'inRatio'},
        ],
        metrics: []
      }
    },

当我在组件中调用操作时，我会从商店获得更新后的 metrics

//Component
  calulateMetrics(event) {
    this.$store.dispatch('performeMetricsCalculation', {dataZoomStart:event.startDate, dataZoomEnd:event.endDate}).then(() => {
      this.metrics = this.$store.getters.getMetrics;
      console.log("Calculated metric", this.metrics)
    })
  },

//actions
performeMetricsCalculation({dispatch, commit, getters}, {dataZoomStart, dataZoomEnd}) {
  //console.log("performeMetricsCalculation", dataZoomStart, dataZoomEnd)

  return new Promise((resolve, reject) => {
    dispatch('performSetRangeTime', {dataZoomStart: dataZoomStart, dataZoomEnd: dataZoomEnd}).then(() => {
      dispatch('performMetrcisUpdating').then(() => {
        commit('resetUpdateStatus')
      })
    })
    resolve()
  })
},

performMetrcisUpdating({commit}) {
  return new Promise((resolve, reject) => {
    commit('calculateMetrics')
    resolve()
  })
},

在调试过程中，我打印了metrics 变量，我发现数据与初始数据不同。但是表格没有更新。

在mutations我使用如下逻辑

calculateMetrics({portfoliosData, period, status}) {
  let updatedMetrics = []

  for (let s in portfoliosData.performance) {
    if (portfoliosData.performance.hasOwnProperty(s)) {
      //console.log("Calculate metrics", period.startDateIdx, period.endDateIdx)
      let port = {...portfoliosData.performance[s]}

      updatedMetrics.push({
        name: port.name,
        maxDd: maxDrawdown(port.data, period.startDateIdx, period.endDateIdx),
        acRet: accumulativeReturn(port.data, period.startDateIdx, period.endDateIdx),
        anRet: annualReturn(port.data, period.startDateIdx, period.endDateIdx),
        anVol: annualVolatility(port.data, period.startDateIdx, period.endDateIdx),
        sRatio: sharpeRatio(port.data, period.startDateIdx, period.endDateIdx),
        inRatio: informationRatio(port.data, period.startDateIdx, period.endDateIdx)
      })

      if (!status.isUpdated) {
        portfoliosData.metrics = updatedMetrics
      } else {
        Vue.set(portfoliosData, 'metrics', updatedMetrics)
      }
    }
  }
}

当我在不执行操作的情况下获取数据时，更新表没有问题。但是，当我想更新表格时，新数据不会呈现，尽管 metrics 变量会发生变化。这看起来很奇怪。

我只在这种特定情况下观察到这个问题。我也尝试将:items="metrics" 更改为:items=$store.getters.getMetrics，但它也没有帮助我。

Answer 1

我觉得你可以把mutations改成

calculateMetrics(state) {
  let {portfoliosData, period, status} = state // ES6 syntax
  let updatedMetrics = []

  for (let s in portfoliosData.performance) {
    if (portfoliosData.performance.hasOwnProperty(s)) {
      //console.log("Calculate metrics", period.startDateIdx, period.endDateIdx)
      let port = {...portfoliosData.performance[s]}

      updatedMetrics.push({
        name: port.name,
        maxDd: maxDrawdown(port.data, period.startDateIdx, period.endDateIdx),
        acRet: accumulativeReturn(port.data, period.startDateIdx, period.endDateIdx),
        anRet: annualReturn(port.data, period.startDateIdx, period.endDateIdx),
        anVol: annualVolatility(port.data, period.startDateIdx, period.endDateIdx),
        sRatio: sharpeRatio(port.data, period.startDateIdx, period.endDateIdx),
        inRatio: informationRatio(port.data, period.startDateIdx, period.endDateIdx)
      })


    }
  }
   portfoliosData.metrics = updatedMetrics
   state.portfoliosData = JSON.parse(JSON.stringify(portfoliosData)) // assign to new object
}

我们需要创建新对象（我使用了 JSON.parse(JSON.stringify()) 技术）以使vuex 了解数据已更改。