点击未传递到 Vue 2 中的自定义组件

Question

我包括一堆这样的帖子：

<template>
  <div id="posts">
    <div id="posts-wrapper">
      <post v-for="(item, key) in posts" :key="item.id" :post="item" :isListItem="true"></post>
    </div>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
      <span slot="no-more">
        There are no more posts
      </span>
    </infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
import posts from '@/api/posts'
import post from '@/components/Post'

export default {
  name: 'posts',
  components: {
    post,
    InfiniteLoading,
  },
  data () {
    return {
      posts: []
    }
  },
  methods: {
    onInfinite() {
        posts.getPosts(page++).then(posts => {
        this.posts = this.posts.concat(posts);
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
      })
    }
  }
};
</script>

这里是post 组件：

<template>
  <v-card class="post-list-item" v-bind:class="{ clickable: isListItem }" @click.native="openPost">
    <div class="header">
      {{ post.name }}
    </div>
    <div class="image">

    </div>
    <div class="data">

    </div>
    <!-- same handler bound here just for testing -->
    <div class="button" v-on:click.native="openPost">
      Open post
    </div>
  </v-card>
</template>

<script>
  export default {
    name: 'post',
    methods: {
      openPost() {
        console.log('post opening');
      }
    },
    props: {
      post: {
        type: Object,
        required: true
      },
      isListItem: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {}
    }
  }
</script>

问题是点击没有通过，即。 openPost() 方法永远不会被调用。如果我在父级中设置了一个监听器，那么它可以工作，但不是我想要的。点击应该在组件本身内处理。

v-card 是 Vuetify component。

我做错了什么？

Answer 1

我有同样的问题，但我通过使用解决了它

v-on:click

而不是

@click.native