Vue.js passer fonction des accessoires et des enfants, l'appel à l'aide de données
j'ai un composant post list et un composant post.
je passe une méthode pour appeler à partir de la liste des posts au composant post, donc quand un bouton est cliqué il sera appelé.
Mais je veux passer l'id de la poste lorsque cette fonction est cliqué
Code:
let PostsFeed = Vue.extend({
data: function () {
return {
posts: [....]
}
},
template: `
<div>
<post v-for="post in posts" :clicked="clicked" />
</div>
`,
methods: {
clicked: function(id) {
alert(id);
}
}
}
let Post = Vue.extend({
props: ['clicked'],
data: function () {
return {}
},
template: `
<div>
<button @click="clicked" />
</div>
`
}comme vous pouvez le voir dans POST component vous avez un clic qui exécute une méthode qu'il a obtenu d'un prop, je veux ajouter une variable à cette méthode.
Comment faites-vous faire cela?
2 réponses
Normalement, le click event handler recevra l'événement comme premier argument, mais vous pouvez utiliser bind dire à la fonction à utiliser pour ses this et premier(s) argument (S):
:clicked="clicked.bind(null, post)
réponse mise à jour: cependant, il pourrait être plus simple (et il est plus de valeur-standard) d'avoir l'enfant émettent un événement et que le parent s'en occupe.
let Post = Vue.extend({
template: `
<div>
<button @click="clicked">Click me</button>
</div>
`,
methods: {
clicked() {
this.$emit('clicked');
}
}
});
let PostsFeed = Vue.extend({
data: function() {
return {
posts: [1, 2, 3]
}
},
template: `
<div>
<post v-for="post in posts" @clicked="clicked(post)" />
</div>
`,
methods: {
clicked(id) {
alert(id);
}
},
components: {
post: Post
}
});
new Vue({
el: 'body',
components: {
'post-feed': PostsFeed
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<post-feed></post-feed>en utilisant Vue 2 et en développant le code de @Roy J ci-dessus, j'ai créé une méthode dans le composant enfant (Post) qui appelle la fonction prop et renvoie un objet de données dans le cadre du rappel. J'ai également passé dans le post comme un accessoire et utilisé sa valeur D'ID dans le rappel.
retour dans le component Posts (parent), j'ai modifié le cliqué sur fonction en référençant l'événement et en obtenant la propriété ID de cette façon.
découvrez le travail Violon ici
Et voici le code:
let Post = Vue.extend({
props: {
onClicked: Function,
post: Object
},
template: `
<div>
<button @click="clicked">Click me</button>
</div>
`,
methods: {
clicked() {
this.onClicked({
id: this.post.id
});
}
}
});
let PostsFeed = Vue.extend({
data: function() {
return {
posts: [
{id: 1, title: 'Roadtrip', content: 'Awesome content goes here'},
{id: 2, title: 'Cool post', content: 'Awesome content goes here'},
{id: 3, title: 'Motorcycle', content: 'Awesome content goes here'},
]
}
},
template: `
<div>
<post v-for="post in posts" :post="post" :onClicked="clicked" />
</div>
`,
methods: {
clicked(event) {
alert(event.id);
}
},
components: {
post: Post
}
});
new Vue({
el: '#app',
components: {
'post-feed': PostsFeed
}
});
Et c'est le HTML
<div id="app">
<post-feed></post-feed>
</div>