Использование HTML с Vue или как адаптировать его к Vue.js - PullRequest
Новая
       16

Использование HTML с Vue или как адаптировать его к Vue.js

0 голосов
/ 30 мая 2018

Итак, я использую оболочку highcharts vue.js в веб-приложении, которое я создаю изначально, оно было полностью построено в laravel / blades, но все изменилось, и теперь я использую vue.Поэтому я пытаюсь сделать кнопки элементов легенды на графике такими, чтобы они были кликабельными, чтобы при их нажатии я мог изменить их стиль на прозрачный.

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>';
    }
}

Это мой код легенды для старших карт.Теперь, когда я нажимаю на кнопку, в консоли написано: Uncaught ReferenceError: changebackground is not defined at HTMLElement.onclick.Теперь у меня есть функция changebackground, объявленная в моих методах vue.Я попытался объявить его в начале тега script, но безрезультатно.Любой совет, как сделать эту работу?Вот мой метод в vue 

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

Надеюсь, сообщество сможет мне помочь.

1 Ответ

0 голосов
/ 30 мая 2018

Попробуйте изменить 

onclick

на 

@click

и удалите «this» в качестве параметра.«this» в Vue - это весь компонент, а не только HTMLElement.

...