时间戳

首页 > 解决方案 > 在 Vue 中使用 HTML 或如何使其适应 Vue.js

highcharts - 在 Vue 中使用 HTML 或如何使其适应 Vue.js

问题描述

因此，我在最初构建的 Web 应用程序中使用了 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>';
    }
}

那是我的 highcharts 的图例代码。现在，当我单击按钮时，它会显示：Uncaught ReferenceError: changebackground is not defined at HTMLElement.onclick在控制台中。现在我确实changebackground在我的 vue 方法中声明了函数。我也尝试在脚本标记的开头声明它，但无济于事。关于如何使这项工作的任何建议？这是我在vue中的方法

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

希望社区能够帮助我。

标签： highchartsvue.jsonclickevent-handling

解决方案

尝试改变

onclick

至

@click

并删除“this”作为参数。Vue 中的“this”是所有组件，而不仅仅是一个 HTMLElement。

推荐阅读