如何从 vanilla JS 事件监听器修改 Vue 数据？

Question

我有一个条形码扫描器应用程序，它基于一个简单的键盘记录器和一些我想以适当方式处理的 vue 数据。请查看以下简化（工作）示例。有没有比 var obj = this; 访问我的 vue 实例而不是文档更好的方法来访问 packageA 数组？

export default {
  name: "xxx",
  data() {
    return {
      packageA: []
    };
  },
  created: function () {
     var obj = this;
     document.addEventListener('keyup', function (e) {
       obj.packageA.push(e.key)
     });
  }
}

执行此操作的正确方法是什么？

Answer 1

你可以使用箭头函数:

new Vue({
  el: "#demo",
  data() {
    return {
      packageA: []
    };
  },
  created() {
    document.addEventListener('keyup', (e) => {
      this.packageA.push(e.key)
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  {{ packageA }}
</div>

如何从 vanilla JS 事件监听器修改 Vue 数据？

Howto modify Vue Data from vanilla JS event listener?

javascript

vue.js

vuejs2