Howto modify Vue Data from vanilla JS event listener?

Question

I've got a barcode scanner app based on a simple keyboard logger and some vue data I'd like to address in a proper way. Please have a look at the following simplified (working) sample. Is there a better way to access the packageA array than doing a var obj = this; to address my vue instance instead of document?

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

What would be a proper way to do this?

Nikola Pavicevic · Accepted Answer · 2021-09-29 10:34:02Z

1

You can use arrow function :

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>

answered Sep 29, 2021 at 10:34

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tobias Pirzer Over a year ago

ah, ok - the reason for that: "Unlike regular functions, arrow functions don’t have their own this or arguments binding. Instead, those identifiers are resolved in the lexical scope like any other variable."

Collectives™ on Stack Overflow

Howto modify Vue Data from vanilla JS event listener?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related