How to access Vue component from standard JS?

Question

How can I get access to a component's data via a window.addEventListener? I want to hit the 'g' key and hide the Vue component test.

JS:

window.onload = function () {
  Vue.component('test', {
    template: `<div id="box" v-if="visible"></div>`,
    data() {
      return {
        visible: true
      }
    }
  })
  var app = new Vue({
    el: '#app'
  });
  window.addEventListener('keydown', (e) => {
    if (e.key == 'g') {
      //set test.visible = false
    }
  });
  window.app = app;
}

HTML:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="code.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
  <div id="app">
    <test></test>
  </div>
</body>
</html>

tony19 · Accepted Answer · 2022-07-15 23:25:25Z

2

Add the listener in the created component's life cycle hook. This will give you access to the instance, including the visible data property.

Make sure to also remove the listener once your component is destroyed.

window.onload = function() {
  Vue.component('test', {
    template: `<div id="box" v-if="visible"></div>`,

    data() {
      return {
        visible: true
      }
    },

    created() {
      window.addEventListener('keydown', this.visibilityHandler)
    },

    destroyed() {
      window.removeEventListener('keydown', this.visibilityHandler)
    },

    methods: {
      visibilityHandler(e) {
        if (e.key == 'g') {
          this.visible = false
        }
      }
    },
  });

  var app = new Vue({
    el: '#app'
  });

  window.app = app;
}

#box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <test></test>
</div>

edited Jul 15, 2022 at 23:25

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 30, 2019 at 16:59

Ricky Ruiz

27k7 gold badges49 silver badges61 bronze badges

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

2 Comments

Gabriel Over a year ago

Gracias @Ricky, worked beautifully. I'm starting to dig into these new JS frameworks.

Ricky Ruiz Over a year ago

De nada! Make sure to keep asking questions if you have any doubts.

Ohgodwhy · Accepted Answer · 2019-04-30 16:52:51Z

1

Put the logic inside of the component:

Vue.component('test', {
  template: `<div id="box" v-if="visible"></div>`,
  data() {
    return {
      visible: true
    }
  },
  mounted() {
    window.addEventListener('keydown', (e) => {
      if (e.key == 'g') {
        this.visible = false
      }
    });
  }
})

answered Apr 30, 2019 at 16:52

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

How to access Vue component from standard JS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related