Vue。如何将事件上的数据动态绑定到表

Question

我有一个图（我使用vue-echarts库），并且听了dataZoom事件，该事件用于对初始图进行切片。

在此事件中，我调用一种方法来计算所选数据的指标。然后，我想将这些指标传递给表。

<template>
  <section>
    <figure>
      <chart
          :options="candlestick"
          :init-options="initOptions"
          ref="candlestick"
          auto-resize
          @datazoom="actionOnDataZoom"
      />
    </figure>
    <figure>
      <v-data-table
        :headers="headers"
        :items="metrics"
        hide-actions
        class="elevation-1"
      >
        <template slot="metrics" scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.accumulativeReturn }}</td>
          <td class="text-xs-right">{{ props.item.annualReturn }}</td>
          <td class="text-xs-right">{{ props.item.annualVolatility }}</td>
          <td class="text-xs-right">{{ props.item.maxDrawdown }}</td>
          <td class="text-xs-right">{{ props.item.sharpeRatio }}</td>
          <td class="text-xs-right">{{ props.item.informationRatio }}</td>
        </template>
      </v-data-table>
    </figure>
  </section>
</template>


<script>
import calculateMetrics from './metrics.js'
let periods = null

export default {
    name: "candlestick",
    props: {
      tsdata: {
        type: Array
      }
    },

data: function () {
  return {
    candlestick: getCandleStick(),
    rendered: false,
    initOptions: {
      renderer: 'canvas'
    },
    headers: [
      {text: 'Measure', value: 'name', sortable: false},
      {text: 'Accumulative Return', value: 'accumulativeReturn'},
      {text: 'Annual Return', value: 'annualReturn'},
      {text: 'Annual Volatility', value: 'annualVolatility'},
      {text: 'Max Drawdown', value: 'maxDrawdown'},
      {text: 'Sharpe Ratio', value: 'sharpeRatio'},
      {text: 'Information Ratio', value: 'informationRatio'},
    ],
     metrics: [{
      name: "2_",
      maxDrawdown: 10,
      accumulativeReturn: 0.055947072399999964,
      annualReturn: 0.05445355305534472,
      annualVolatility: 7.377778178783156,
      sharpeRatio: 0.007380752271997143,
      informationRatio: 0
    }],
    //Mock data
   }
},
  methods: {

      actionOnDataZoom: function(event, instance, echarts) {
        console.log(event.start, event.end)
        this.metrics = calculateMetrics(event.start, event.end)
  },
 }
</script>

calculateMetrics

的示例输出

[{ accumulativeReturn: 100, 
annualReturn: 120, 
annualVolatility: 150, 
informationRatio: 180,
maxDrawdown: 100,
name: "string"
sharpeRatio: 20
}]

但是我不明白如何将结果传递到表中。我的想法是创建一个变量来存储calculateMetrics(event.start, event.end)函数的结果并将其绑定到表，但是我不确定这是否是一个好习惯。