昨天已经将记帐本打造出一个基本雏形了，但似乎功能并不是很多，纯粹就只是看到消费的金额和走向而已，所以我们今天来利用图表的「事件属性」搭配 Vue 的 emit 来为记帐本新增一个查看明细的功能吧。

记帐本实作

就像下图所示，这次要做到的功能是希望能点击「数据列」时，在下方显示当天的消费明细以及总金额，让我们的记帐本有更完整的功能。

而开发的逻辑是透过点击拿到数据点的日期时间戳，然後利用父子层的沟通来将这个时间戳传递到一个新的「清单元件」中，清单元件会拿这个时间戳去打 Json-Server 的 API，取得该日期的帐目定显示於画面上。那就马上动手开发吧！

1.设定事件属性

我们在图表元件 LedgerChart.vue 中新增一个 Method，并将它作为图表 click 事件的回呼函式，而由於回呼函式可以接到 Highcharts 的 event 物件，我们就可以拿到时间戳，并利用 $emit 来传至 App.vue。

methods: {
  selectDate() {
    this.$emit("selectDate", event.point.category)
  }
}

// computed
options() {
  let options = Object.assign(this.chartOptions, {});
  options.series = this.seriesData;
  options.xAxis.categories = this.xAxisCategories;
  options.plotOptions.series.events = {
    click: this.selectDate
  };
  return options;
}

2.父层监听自定义事件

刚刚在 LedgerChart.vue 有 emit 了自定义事件，现在要在父层来监听接收这事件，这样每次点击数据列就都会更新 date 了。

<template>
  <div id="app">
    <LedgerForm />
    <LedgerChart @selectDate="selectDate" />
  </div>
</template>

<script>
import LedgerForm from "./components/LedgerForm"
import LedgerChart from "./components/LedgerChart"

export default {
  name: "App",
  components: {
    LedgerForm,
    LedgerChart
  },
  data() {
    return {
      date: 0
    }
  },
  methods: {
    selectDate(val) {
      this.date = val;
    }
  }
}
</script>

3.清单元件 - LedgerList.vue

再来就是下方要显示的明细清单了，档案内容如下，主要是透过接收一个 date 的 Prop，每当它更新时就会触发 watch，然後利用 Json-Server 的 Filter 功能来抓出「当天」的资料，如此就能将消费明细显示在画面上了。

明细上方的日期和总金额透过 computed 计算即可得到，因为不是重点，这边就将程序码省略了。

<template>
  <div v-if="date">
    <div class="ledger-item" v-for="item in fetchData" :key="item.id">
      <div>{{ item.category }}</div>
      <div>{{ item.description }}</div>
      <div>NT$ {{ item.amount }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      date: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        fetchData: []
      }
    },
    watch: {
      date(val) {
        this.axios.get(`http://localhost:3000/accounts?date=${val}`)
          .then((response) => {
            this.fetchData = response.data;
          });
      }
    }
  }
</script>

4.挂载元件并传入 Prop

清单元件完成後就将他挂到 App.vue 上了，并且记得要把刚刚的 date 传进清单元件中。如此一来我们就成功增加了查看明细的新功能罗！

<template>
  <div id="app">
    <LedgerForm />
    <LedgerChart @selectDate="selectDate" />
    <LedgerList :date="date" />
  </div>
</template>

　
花了四天的时间我们从熟悉 Highcharts-Vue 的使用到最後开发出一个小作品，相信大家应该有感受到 Highcharts 与前端框架的配合是多麽的方便好用。不过随着记帐本的完成，这个系列文章也即将告一段落了，明天最後一篇文章则会做个系列的总结，并讲讲我的参赛心得。