web-dev-qa-db-fra.com

vue.js référence div id sur v-on: click

Utilisation de v-on:click J'aimerais définir une variable avec l'id du div dans Vue.JS - comment faire référence à cela?

<div id="foo" v-on:click="select">...</div>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            select: function(){
                divID = this.id // ??
                alert(divID)
            }
        }
    })
</script>
onclickvue.js
14
Mike Thrussell

Vous pouvez étendre votre gestionnaire d'événements avec l'objet événement $event. Cela devrait correspondre à vos besoins:

<div id="foo" v-on:click="select($event)">...</div>

L'événement est transmis en javascript:

export default {
    methods: {
        select: function(event) {
            targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}


Comme mentionné dans les commentaires, $event n’est pas strictement nécessaire si vous l’utilisez comme seul paramètre. C'est un bon rappel que cette propriété est transmise lors de l'écriture explicite.

Cependant, personne ne vous empêchera d'écrire la notation courte:

<div id="foo" @click="select">...</div>


Notez que la méthode ne recevra pas l’objet $event lorsque vous ajoutez un autre paramètre. Vous devez l'ajouter explicitement à la position que vous allez gérer dans l'écouteur. Tout ordre de paramètre fonctionnera:

<div id="foo" @click="select(bar, $event)">...</div>

Pour trouver plus d'options de la directive v-on, vous pouvez parcourir l'entrée correspondante dans la documentation de vue:

Vue API - v-on

29
nirazul