获取函数内的变量并将其分配给范围外的另一个变量

Question

我正在使用 Chartist 和 VueJS，我正在尝试访问图表中的数据。当我点击我的图表时，我应该能够获得关于我点击的索引的信息。我得到了这些数据，但我无法将该数据传递给 Vue 本身。

这是我当前的代码：

  data() {
    return {
      monthIndex: 0,
      chartData: {
        labels: [],
        series: [[], []]
      },

      /* other chart options that I omitted */

      chartEventHandlers: [
        {
          event: "draw",
          fn(data) {
            if (data.type === "bar") {
              data.element.animate({
                y2: {
                  begin: data.index * 40,
                  dur: "0.3s",
                  from: data.y1,
                  to: data.y2,
                  easing: "easeOutQuad"
                },
                opacity: {
                  begin: data.index * 40,
                  dur: "0.3",
                  from: 0,
                  to: 1,
                  easing: "easeOutQuad"
                }
              });

              data.element._node.onclick = evt => {
                console.log(data.axisX.ticks[data.index]);
               // How do I assign this to monthIndex??

              };
              //
            }
          }
        }
      ]
    };
  }

如您所见：

data.element._node.onclick = evt => {
                console.log(data.axisX.ticks[data.index]);
              };

我可以让它在控制台中显示正确的值，我只是在想办法让

monthIndex = data.axisX.ticks[data.index]

但是，monthIndex 不存在于函数范围内，所以我不能简单地将它分配给那个变量。我该怎么做呢？我试图让 monthIndex 显示在 html 视图中，以便每次我单击图表的另一部分时它都会改变。

Answer 1

是什么，你可以通过这样做将 Vue 作用域绑定到一个函数：

function(data) {

}.bind(this)

这允许您访问 Vue 作用域，或 this 函数内部，以便能够将索引值分配给适当的变量。

获取函数内的变量并将其分配给范围外的另一个变量

Get variable within function and assign it to another variable out of its scope

javascript

vue.js

chartist.js