Highcharts Using HTML with Vue or how to adapt it to Vue.js

Highcharts Using HTML with Vue or how to adapt it to Vue.js,highcharts,vue.js,onclick,event-handling,Highcharts,Vue.js,Onclick,Event Handling,So I'm using the highcharts vue.js wrapper in a web application that I am building at originally it was built completely in laravel/blades but things have changed and now I am using vue. So I'm trying to make the legend items buttons on the graph and for them to be clickable so that when they are clicked I can change their styling to be transparent. legend: { width: 250, layout: 'vertical', align: 'right', verticalAlign: 'middle', itemMarginTop: -5, itemMarginBottom: -10, squar

So I'm using the highcharts vue.js wrapper in a web application that I am building at originally it was built completely in laravel/blades but things have changed and now I am using vue. So I'm trying to make the legend items buttons on the graph and for them to be clickable so that when they are clicked I can change their styling to be transparent.

legend: {
  width: 250,
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  itemMarginTop: -5,
  itemMarginBottom: -10,
  squareSymbol: true,
  symbolHeight: 20,
  symbolWidth: 0,
  symbolRadius: 0,
  useHTML: true,
  labelFormatter: function () {
    return '<label class="checkbox legend-items">' +
           '<strong class="btn legend-btn" style="width: 220px; background-color: '+this.color+'" onclick=changebackground(this)>'+ this.name + '</span></strong>'+
           '</label>';
    }
}

That is my legend code for the highcharts. Now when ever I click on the button it says:

Uncaught ReferenceError: changebackground is not defined at HTMLElement.onclick
in the console. Now I do have the function
changebackground
declared in my vue methods. I have tried declaring it at the beginning of the script tag as well but to no avail. Any advice on how to make this work? Here is my method in vue

methods: {
  changebackground(event) {
    console.log('this is amazing if it works');
  }
}

Hopefully the community will be able to help me out.


#1

Try change

onclick

to

@click

And remove "this" as parameter. "this" in Vue is the all component, not only a HTMLElement.


#2

I've done that and I do not get an error in the console but I don't the get console log that I am expecting either.

#3

have you inspected the html to see how it looks like? Highcharts may do some weird things with @click hmm

#4

both on click and @click show up when I inspect element. I thought about importing a js file where I import components, but that didn't work either.

#5

Do you open the tag '<span>'? You close this tag inside 'strong'

#6

Maybe the issue is caused by the way that you define onclick value. Shouldn't it be onclick='changebackground(this)' instead of onclick=changebackground(this)?