Show/hide dynamic data on button click in vuejs

问题:

I want to dynamically show and hide the line chart on every button click, but when I click on any button, data is not changing. Every time same data is visible to me. Here is my code:

<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>

where I am assigning selected data to a variable "selectedChartData" on a button click and passing to a line chart component. In "this.buySellChartData[i].tag" tag is having value "year,week or month". Here is the line chart code:

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)
    }
}

Please open the link to see the screenshot that what kind of chart I am creating https://www.awesomescreenshot.com/image/4110976/35de049e785364eec1006c23301dcf2f. So How it should be possible to show different chart on each button click. If someone needs more info, Please let me know. Any help will be appreciated. Thanks!

回答1:

vue-chartjs does not provide a live update if you change the datasets. However, vue-chartjs provides two mixins to achieve this.

• reactiveProp
• reactiveData

so add reactiveProp mixin to you compenent with make a live update of chart on dataset change or update

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)
  }
}