webentwicklung-frage-antwort-db.com.de

Vue.js übergibt die Funktion als Requisite und veranlasst Kind, es mit Daten aufzurufen

Ich habe eine Beitragsliste und eine Beitragskomponente.

Ich übergebe eine Methode, um aus der Beitragsliste die Beitragskomponente aufzurufen. Wenn eine Schaltfläche angeklickt wird, wird sie aufgerufen. 

Ich möchte jedoch die Post-ID übergeben, wenn diese Funktion angeklickt wird

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>
    `
}

wie Sie in der Post-Komponente sehen können, haben Sie einen Klick, der eine Methode ausführt, die er von einer Requisite erhalten hat. Ich möchte dieser Methode eine Variable hinzufügen.

Wie machst du das?

23
Tzook Bar Noy

Normalerweise empfängt der Ereignishandler click das Ereignis als erstes Argument. Sie können jedoch bind verwenden, um der Funktion mitzuteilen, was für ihr this und das erste Argument verwendet werden soll:

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

Aktualisierte Antwort: Es könnte jedoch einfacher sein (und es ist mehr Vue-Standard), dass das Kind emit ein Ereignis und das übergeordnete Ereignis behandelt werden.

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

Mit Vue 2 und der Erweiterung von @ Roy J oben erstellte ich eine Methode in der untergeordneten Komponente (Post), die die prop-Funktion aufruft und ein Datenobjekt als Teil des Rückrufs zurücksendet. Ich habe den Post auch als Requisite übergeben und seinen ID-Wert im Callback verwendet.

Zurück in der Posts-Komponente (übergeordnete Komponente) habe ich die Funktion clicked geändert, indem auf das Ereignis verwiesen und die ID-Eigenschaft auf diese Weise abgerufen wurde.

Schauen Sie sich die funktionierenden Fiddle hier an

Und das ist der 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
  }
});

Und das ist das HTML

<div id="app">
    <post-feed></post-feed>
</div>
0
Haret