web-dev-qa-db-fra.com

Vue.js: la fonction de clic simple ne se déclenche pas

J'ai une application très simple:

<div id="show_vue">
    <page-change page="bio" @click="changeThePage"></page-change>
    <page-change page="health" @click="changeThePage"></page-change>
    <page-change page="finance" @click="changeThePage"></page-change>
    <page-change page="images" @click="changeThePage"></page-change>
</div>

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href
    },
    methods: {
        changeThePage: function() {
            console.log("this is working")
        }
    }
})

... mais quand je clique sur le <page-change></page-change>, rien n'est enregistré dans la console. Je sais que je manque quelque chose de simple mais je ne reçois aucune erreur.

Comment puis-je faire mon déclic changeThePage

javascriptvue.jsvuejs2
6
Jeremy Thomas

Quand vous faites:

<page-change page="bio" @click="changeThePage"></page-change>

Cela signifie que vous attendez page-change le composant émet l'événement click.

Meilleure solution (grâce à @aeharding): utilisez le modificateur d'événement .native

<page-change page="bio" @click.native="changeThePage"></page-change>

Solution 1: émettre un événement de clic à partir du composant enfant:

Vue.component("page-change", {
    template: "<button @click='clicked' class='btn btn-success'>Button</button>",
    props: ["page"],
    methods: {
       clicked: function(event) {
         this.$emit('click', this.page, event); 
       }
    }
})

Pour information event est la valeur par défaut transmise par Vue pour un événement natif comme click: événement DOM

Solution 2: émettez directement à partir du composant parent:

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button {{ page }}</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href,
        pages: [
          'bio', 'health',
          'finance', 'images'
        ]
    },
    methods: {
        changeThePage: function(page, index) {
            console.log("this is working. Page:", page, '. Index:', index)
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>
<div id="show_vue">

  <span v-for="(page, index) in pages" :key="index+page"
        @click="changeThePage(page, index)">
  
    <page-change :page="page"></page-change>
    
  </span>

</div>
16
Happyriwan

La meilleure façon de procéder consiste à utiliser le .native modificateur d'événement.

Par exemple:

<my-custom-component @click.native="login()">
  Login
</my-custom-component>

Source: https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

3
aeharding