单击未传递到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组件。

我在做什么错？

Answer 1

我遇到了同样的问题，但是我通过使用

解决了它

v-on:click

而不是

@click.native