Search code examples
javascriptvue.jsvuejs2vue-chartjs

How can I open the dialog when clicking the value that has been plot on chart in vue-chartjs


I'm trying to open a v-dialog when I click a point on a chart. I bound the dialog's v-model to this.dialog (a data property), but setting this.dialog to true doesn't open the dialog. When I check the value of the this.dialog, it is really true. Why doesn't the dialog open?

<line-chart
    :chart-data="datacollection"
    :options="optionscollection"
    />

this.optionscollection = {
  onClick: function(evt, item) {
    this.dialog = true;
  }
};

Solution

  • The onClick handler does not have its context bound properly, so this is not the Vue component instance there. Use an arrow function instead:

    this.optionscollection = {
      onClick: (evt, item) => {
        this.dialog = true;
      }
    };
    

    Edit Opening v-dialog on chart click