Je rends html à l'aide de v-html dans lequel je me lie à un événement de clic comme ceci :

<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>

Cela imprime event.target.id sur la console comme prévu. Il semble que la valeur de event.target.id ne puisse pas être définie sur une propriété réactive.

Comment puis-je définir la valeur de event.target.id égale à une propriété de données réactive différente afin que je puisse gérer correctement les modifications ?

0
Joe Berg 30 oct. 2020 à 19:38

1 réponse

Meilleure réponse

[Copié de mon commentaire ci-dessus]

Vous ne devriez pas avoir besoin d'ajouter un gestionnaire de clics natif ici. @click.prevent="handleClick($event)" fonctionnerait également (où handleClick est une méthode personnalisée).

1
Hannah 30 oct. 2020 à 19:01