web-dev-qa-db-ja.com

Vue.jsは関数をpropとして渡し、子がデータで呼び出すようにします

投稿リストコンポーネントと投稿コンポーネントがあります。

投稿リストから投稿コンポーネントに呼び出すメソッドを渡すので、ボタンをクリックすると呼び出されます。

しかし、私はこの機能がクリックされたときに投稿IDを渡したい

コード：

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

postコンポーネントでわかるように、小道具から取得したメソッドを実行するクリックがあるので、そのメソッドに変数を追加します。

どうやって？

javascriptvue.jsvue-component
26
Tzook Bar Noy

通常、clickイベントハンドラーは最初の引数としてイベントを受け取りますが、 bind を使用して、thisおよび最初の引数：

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

更新された回答：ただし、子を持つことはより簡単である可能性があります（そして、よりVue標準です） emit anイベントを処理し、親に処理させます。

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>
25
Roy J

Vue 2を使用し、上記の@Roy Jのコードを展開して、prop関数を呼び出し、データオブジェクトをコールバックの一部として送り返す子コンポーネント（Post）でメソッドを作成しました。また、投稿として小道具として渡され、コールバックでそのID値を使用しました。

Postsコンポーネント（親）に戻り、イベントを参照し、そのようにIDプロパティを取得することにより、clicked関数を変更しました。

動作を確認してください ここで中

そして、これはコードです：

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
  }
});

そして、これはHTMLです

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