Показать / скрыть динамические данные по нажатию кнопки в vuejs

Question

Я хочу динамически отображать и скрывать линейный график при каждом нажатии кнопки, но когда я нажимаю любую кнопку, данные не меняются.Каждый раз одни и те же данные видны мне.Вот мой код:

<template>
   <div> 
      <v-btn color="primary" mr-2 @click="changeTab('week')">Week</v-btn>
      <v-btn color="error" mr-2  @click="changeTab('month')">Month</v-btn>
      <v-btn color="info" mr-2  @click="changeTab('year')">Year</v-btn>
      <div v-if="selectedChartData !=null">
         <line-chart
            :width="650"
            :height="400"
            :dataSet= "selectedChartData.ChartData"
            :labels= "selectedChartData.ChartLabel"
            :chartColorsData="selectedChartData.ChartColors"
            :label="selectedChartData.ChartData"
            >
         </line-chart>
      </div>

   </div>

</template>

<script>
import LineChart from "Components/Charts/LineChart";
import { buySellChartData } from 'Assets/data/buySellChartData.js'

export default {
   components:{
      LineChart,
   },
  data() {
    return {
       buySellChartData,
       selectedButton: 'week',
       selectedChartData: null,
    };
  },
  mounted(){
    this.selectedChart(this.selectedButton);
  },
  methods:{
    selectedChart(selectedButton){
      for(var i=0; i< this.buySellChartData.length; i++){
        if(this.buySellChartData[i].tag == selectedButton) {
          this.selectedChartData = this.buySellChartData[i];
          break;
        }
      }
    },
    changeTab(selectedBtn){
      this.selectedButton = selectedBtn;
      this.selectedChart(this.selectedButton);
    }
  }
};
</script>

, где я назначаю выбранные данные переменной " selectedChartData " нажатием кнопки и передачей компоненту линейного графика.В "this.buySellChartData [i] .tag" тег имеет значение "год, неделя или месяц".Вот код линейной диаграммы:

import { Line } from 'vue-chartjs'

const lineTension = 0.1;
const borderWidth = 3;
const pointRadius = 2;
const pointBorderWidth = 2;


export default {
    extends: Line,
    props: {
      dataSet: {
            type: Array
        },
        label: {
            type: Array,
        },
        labels: {
            type: Array
      },
      chartColorsData:{
         type: Array
      },
    },
    data() {
        return {
            options: {
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true,
                            drawBorder: true
                        },
                        ticks: {
                            stepSize: 20,
                     // padding: 5
                     display:true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                     // padding: 10
                     display:true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                responsive: true,
                maintainAspectRatio: false
            }
        }
    },
    mounted() {
        this.renderChart({
         labels: this.labels,
            datasets: [
                {
                    label: (this.label[0]).label,
                    lineTension,
                    borderColor: this.chartColorsData[0].borderColor,
                    pointBorderColor: this.chartColorsData[0].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[0].data
            },
            {
                    label: this.label[1].label,
                    lineTension,
                    borderColor: this.chartColorsData[1].borderColor,
                    pointBorderColor: this.chartColorsData[1].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[1].data
            },
            {
                    label: this.label[2].label,
                    lineTension,
                    borderColor: this.chartColorsData[2].borderColor,
                    pointBorderColor: this.chartColorsData[2].borderColor,
                    pointBorderWidth,
               pointRadius,
                    fill: false,
                    pointBackgroundColor: '#FFF',
                    borderWidth,
                    data: this.dataSet[2].data
                },

            ]
        }, this.options)
    }
}

Пожалуйста, откройте ссылку, чтобы увидеть на скриншоте, что за график я создаю https://www.awesomescreenshot.com/image/4110976/35de049e785364eec1006c23301dcf2f. Так как должна быть возможность показывать разные диаграммы на каждомнажатие кнопки.Если кому-то нужна дополнительная информация, пожалуйста, дайте мне знать.Любая помощь будет оценена.Спасибо!

Answer 1

vue-chartjs не предоставляет обновление в реальном времени, если вы измените наборы данных.Тем не менее, vue-chartjs предоставляет два миксина для достижения этой цели.

• реактивныйProp
• реактивныйData

, так что добавьте в свой реактив смешанный реактив с активным обновлениемграфика изменения или обновления набора данных

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}