Vue统计图表的时间轴和日期筛选优化

<template>  <div>    <vue-timeline>      <vue-timeline-item v-for="item in timelineData" :key="item.id">        <h3>{{ item.date }}</h3>        <p>{{ item.content }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>      </vue-timeline-item>    </vue-timeline>  </div></template><script>import VueTimeline from 'vue-timeline';import VueTimelineItem from 'vue-timeline-item';export default {  components: {    VueTimeline,    VueTimelineItem,  },  data() {    return {      timelineData: [        {          id: 1,          date: '2022-01-01',          content: '事件1',        },        {          id: 2,          date: '2022-02-01',          content: '事件2',        },        {          id: 3,          date: '2022-03-01',          content: '事件3',        },      ],    };  },};</script>

<template>  <div>    <datepicker v-model="selectedDate" type="date"></datepicker>    <button @click="filterData">筛选</button>    <ul>      <li v-for="item in filteredData" :key="item.id">        <span>{{ item.date }}</span>        <span>{{ item.content }}</span>      </li>    </ul>  </div></template><script>import Datepicker from 'vue3-datepicker';export default {  components: {    Datepicker,  },  data() {    return {      selectedDate: '', // 选中的日期      originalData: [        {          id: 1,          date: '2022-01-01',          content: '事件1',        },        {          id: 2,          date: '2022-02-01',          content: '事件2',        },        {          id: 3,          date: '2022-03-01',          content: '事件3',        },      ],      filteredData: [], // 筛选后的数据    };  },  methods: {    filterData() {      this.filteredData = this.originalData.filter(item => item.date === this.selectedDate);    },  },};</script>