Vue中为动态添加按钮绑定onclick函数问题求助

问题根源：你用普通函数作为onclick回调时，函数内部的this指向的是按钮元素本身，而非Vue实例，自然找不到挂载在Vue实例上的navigateHere方法。

给你三种可行的解决办法：

• 用箭头函数绑定回调
  箭头函数会继承外部作用域的this（也就是当前Vue实例），直接调用实例上的方法即可：

  ubutton.onclick = () => {
    this.navigateHere();
  };
  

• 提前保存Vue实例的引用
  把当前Vue实例的this存到变量里，在普通回调函数中用这个变量调用方法：

  const vm = this;
  ubutton.onclick = function() {
    vm.navigateHere();
  };
  

• 改用Vue模板动态生成按钮（更推荐）
  如果按钮是需要动态添加的，尽量用Vue数据驱动的方式在模板里生成，直接用@click绑定方法，完全规避原生DOM绑定的this问题：

  <button v-for="btn in dynamicButtons" @click="navigateHere">{{ btn.text }}</button>
  

  之后在data里维护dynamicButtons数组，添加按钮时直接往数组中push数据即可。

内容的提问来源于stack exchange，提问作者Morgan Long