web-dev-qa-db-fra.com

Vue.js passe comme prop et fait appeler l'enfant avec des données

J'ai un composant de liste de publications et un composant de publication.

Je passe une méthode pour appeler de la liste des publications à la composante publication, ainsi quand un bouton est cliqué, il sera appelé. 

Mais je veux passer le post id lorsque cette fonction est cliquée

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 le composant Post, vous avez un clic qui exécute une méthode qu'il a obtenue d'un accessoire, je veux ajouter une variable à cette méthode.

Comment tu fais ça?

javascriptvue.jsvue-component
23
Tzook Bar Noy

Normalement, le gestionnaire d'événements click recevra l'événement en tant que premier argument, mais vous pouvez utiliser bind pour indiquer à la fonction ce qu'elle doit utiliser pour ses this et premiers arguments:

:clicked="clicked.bind(null, post)

Réponse mise à jour: Cependant, il serait peut-être plus simple (et plus standard avec Vue) de faire en sorte que l'enfant emit un événement et que le parent le gère.

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>

21
Roy J

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é le poste comme accessoire et utilisé sa valeur d'identifiant dans le rappel.

De retour dans le composant Posts (parent), j'ai modifié la fonction clicked en référençant l'événement et en obtenant ainsi la propriété ID.

Découvrez le travail Fiddle 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>
0
Haret