Klicks nicht auf benutzerdefinierte Komponente durchlaufen in Vue 2

Question

ich ein paar Beiträge wie dies zB:

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

Und hier ist die post Komponente:

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

Das Problem ist, dass die Klicks werden nicht durchlaufen, dh. Die openPost() Methode wird nie aufgerufen. Wenn ich einen Listener im Parent einstelle, dann funktioniert das, aber nicht das, wonach ich suche. Die Klicks sollten innerhalb der Komponente selbst behandelt werden.

Die v-card ist eine Vuetify component.

Was mache ich falsch?

Answer 1

hatte ich das gleiche Problem, aber ich löste es durch

v-on:click 

statt

@click.native