如何为 Vuejs 中单击的每个按钮/选项设置日期选择器

Question

我是 Vuejs 新手，我使用了 3 个按钮，分别是 chart1、chart2 和 chart3。因此，每当我单击任何按钮时，我都希望显示单选类型的日期选择。如下图：

我想要做的是，我试图显示图表，每当单击按钮时，无论单击哪个按钮，我都想显示日期选择。

这是我的尝试：

<template>
  <div class="Different charts">
    <div class="buttons" >
      <vs-button color="warning" size="small" @click="chartapi(chart1, all)">Chart1</vs-button>
      <vs-button color="warning" size="small" @click="chartapi(chart2, all)" >Chart2</vs-button>
      <vs-button color="warning" size="small" @click="chartapi(chart3, all)">Chart3</vs-button>
    </div>
      <ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="radios2" >All</vs-radio>
        </li>

        <li>
          <vs-radio id="6mon" color="warning"  vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
        </li>
        <li>
          <vs-radio id="3mon" color="warning"  vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
        </li>
        <li>
          <vs-radio id="1mon" color="warning"  vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
        </li>
      </ul>
  <div class="chart-container"> 
  <canvas id="chart"></canvas>
  </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
export default {
  data () {
    return {
      date: [],
      challenge: [],
      data: [],
      val1: 'all'
    }
  },
  mounted () {
    this.chartapi()
  },
  methods: {
    chartapi (type_name, interval) {
      this.$http.get(`/different/chart/${ type_name  }?interval=${  interval}`)
        .then((r) => {
          this.date = r.data.date
          this.challenge = r.data.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))

          const ctx = this.$refs.chart.getContext('2d')
          new Chart(ctx, {
            type: 'line',
            data: {
              datasets: [
                {
                  label: 'Challenge',
                  data: this.data,
                  borderColor: 'black',
                }
              ]
            },
            options: {
              scales: {
                yAxes: [
                  {
                    ticks: {
                      callback (value) {
                        return `${value}%`
                      }
                    }
                  }
                ],
                xAxes: [
                  {
                    type: 'time',
                    time: {
                      unit: 'month'
                    }
                  }
                ]
              }
            }
          })
        })
    }
  }
}
</script>

正如您所看到的我的代码，您可以理解，每当单击按钮时，都会显示相应的图表

并且我在用于指定日期范围选择值的方法中使用了间隔。

我的问题是如何显示所有选项（按钮）的日期范围选择以及如何在单选按钮中指定间隔。

例如，如果 chartapi(chart1, 3mon) 则显示前 3 个月的 chart1 数据。但我想要的是当单击按钮时它应该显示整个图表数据，如果用户想要查看任何间隔，他可以使用单选按钮，即日期范围选择。所以我想知道如何将间隔集成到单选按钮。请帮帮我。

Answer 1

据我了解，您需要在单击按钮时获取所有数据，然后相应地选择单选按钮，并且您希望在更改单选按钮时更改数据。因此您可以按以下方式更改代码，

<template>
  <div class="Different charts">
    <div class="buttons" >
      <vs-button color="warning" size="small" @click="handleBtnClick(chart1)">Chart1</vs-button>
      <vs-button color="warning" size="small" @click="handleBtnClick(chart2)" >Chart2</vs-button>
      <vs-button color="warning" size="small" @click="handleBtnClick(chart3)">Chart3</vs-button>
    </div>
      <ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="val1" >All</vs-radio>
        </li>

        <li>
          <vs-radio id="6mon" color="warning"  vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
        </li>
        <li>
          <vs-radio id="3mon" color="warning"  vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
        </li>
        <li>
          <vs-radio id="1mon" color="warning"  vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
        </li>
      </ul>
  <div class="chart-container"> 
  <canvas id="chart"></canvas>
  </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
export default {
  data () {
    return {
      date: [],
      challenge: [],
      data: [],
      val1: 'all',
      type: 'chart1'
    }
  },
  mounted () {
    this.chartapi(type, val1);
  },
  methods: {
      handleBtnClick: (chart) => {
          /* This is a method to use in button click */
          this.type = chart;
          this.val1 = 'all' // Assigning 'all' as initial value for each chart
          this.chartapi(this.type, this.val1);
      },
    chartapi (type_name, interval) {
      this.$http.get(`/different/chart/${ type_name  }?interval=${  interval}`)
        .then((r) => {
          this.date = r.data.date
          this.challenge = r.data.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))

          const ctx = this.$refs.chart.getContext('2d')
          new Chart(ctx, {
            type: 'line',
            data: {
              datasets: [
                {
                  label: 'Challenge',
                  data: this.data,
                  borderColor: 'black',
                }
              ]
            },
            options: {
              scales: {
                yAxes: [
                  {
                    ticks: {
                      callback (value) {
                        return `${value}%`
                      }
                    }
                  }
                ],
                xAxes: [
                  {
                    type: 'time',
                    time: {
                      unit: 'month'
                    }
                  }
                ]
              }
            }
          })
        })
    }
  },
  watch: {
      /* You can write a watcher for listen the changes of the radio button */
      val1:(prevValue, newValue) => {
          /* This method triggers everytime you change the value of val1 */
          this.chartapi(this.type, newValue);
      }
  }
}
</script>

我所做的改变是，

1. 添加单独的数据字段/变量以分配图表类型
2. 创建一个单独的方法来触发相应地更改type 变量的按钮并将val1 更改回全部。
3. 创建观察者来观察val1 和如果val1 变化分别加载图表。

更新

由于你不清楚 watcher 是如何工作的，我们可以在 vue 中创建 watcher 作为一种特殊的函数，它会在相关数据字段更新时触发。

首先，我们将单选按钮绑定到val1 数据字段，如下所示。

<ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="val1" >All</vs-radio>
        </li>

        <li>
          <vs-radio id="6mon" color="warning"  vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
        </li>
        <li>
          <vs-radio id="3mon" color="warning"  vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
        </li>
        <li>
          <vs-radio id="1mon" color="warning"  vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
        </li>
      </ul>

您可以看到所有单选按钮都是v-bind 和val1，因此 val1 的值会根据所选单选按钮而变化。 （全部，6mon，3mon，1mon）。

接下来，我们为val1创建天气，代码如下。

watch: {
      /* You can write a watcher for listen the changes of the radio button */
      val1: (prevValue, newValue) => {
          /* This method triggers everytime you change the value of val1 */
          this.chartapi(this.type, newValue);
      }
  }

我们创建与数据字段同名的观察程序，并且每次val1 更改时都会触发它（这意味着它会在您更改单选按钮时触发）。然后在观察者内部，当值发生变化时，我们调用chartapi，并将val1 的新值作为第二个参数。这使得图表根据所选月份再次加载。