How to react to native event in vue js?

Question

I am rendering html using v-html in which I am binding to a click event like so:

<template>
  <q-page fill-height>
    <div>
      <q-btn flat @click="drawer = !drawer" round dense icon="menu" />
      <span v-html="html"></span>
    </div>
  </q-page>
</template>

<script>
  ...
  data: {
     return {
       id: null
     }
  },
  mounted() {
     this.$el.children[0].children[1].addEventListener("click", function(event) {
      event.preventDefault();
      console.log(event.target.id)
    });
  }
</script>

This prints event.target.id to the console as expected. It seems that the value of event.target.id can not be set to a reactive property.

How can I set the value of event.target.id equal to a different reactive data property so I can handle changes properly?

What exactly do you want to do with event.target.id? Also, you shouldn't need to add a native click handler here. @click.prevent="handleClick($event)" would work too (where handleClick is a custom method) — Hannah
– Hannah, Commented Oct 30, 2020 at 17:24
oh! didn't realize I could do it directly on the span element. this worked. if you want to put it in an answer i will mark it as such. thanks — Joe B.
– Joe B., Commented Oct 30, 2020 at 18:22

Hannah · Accepted Answer · 2020-10-30 19:01:58Z

1

[Copied from my comment above]

You shouldn't need to add a native click handler here. @click.prevent="handleClick($event)" would work too (where handleClick is a custom method).

answered Oct 30, 2020 at 19:01

Hannah

1,1436 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

How to react to native event in vue js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related