J'essaie d'obtenir une méthode à exécuter sur un composant parent lorsqu'un bouton de l'un de ses composants enfants est cliqué. J'utilise des composants de fichier unique avec Webpack. Voici le code pour le composant enfant:Impossible d'obtenir la méthode à exécuter sur le composant parent à partir du composant enfant
<template>
<button v-on:click="add">Click</button>
</template>
<script>
export default {
methods: {
add:() => {
console.log('foo')
this.$dispatch('addClick')
}
}
}
</script>
Et le code pour le parent:
<template>
<div id="app">
<count :total="total"></count>
<click></click>
</div>
</template>
<script>
import count from './components/count.vue'
import click from './components/click.vue'
export default {
components: {
count,
click
},
data:() => {
return {
total: 0
}
},
methods: {
addToTotal:() => {
console.log('bar')
this.total += 1
}
},
events: {
addClick: 'addToTotal'
}
}
</script>
Le composant count
est juste un élément h1 qui affiche la variable total
. Lorsque je clique sur le bouton, "foo" se connecte à la console, mais pas "bar" et le total ne change pas. Des idées sur ce que je fais mal? Merci d'avance!
Vous utilisez la notation lambda, qui salit probablement votre 'this'. Essayez 'function' à la place. –