Vue.js防止v-link

Question

我有一张桌子，看起来像这样：

代码如下：

<div class="Topic__item__body" v-for="topic in topics" v-link="{ name: 'Messages', params: { topic: topic.slug }}">
    <div class="Topic__item__body_content">
        <p class="Topic__title">{{ topic.name }}</p>
    </div>

    <div class="Topic__item__body_content">
        <p>Berichten: 6</p>
    </div>

    <div class="Topic__item__body_content">
        <p>Door: Name lastname</p>
        <i class="material-icons Hearth" @click="test">&#xE87E;</i>
    </div>
</div>

因此，如何确保用户单击材质炉膛图标时，它不会链接到v-link="{ name: 'Messages', params: { topic: topic.slug }}"但会转到方法test ？

Answer 1

要在单击时调用方法，您需要这样做：

<i @click="test">&#xE87E;</i>

调用在vue-router注册的链接，就像这样

<router-link :to="{ path: 'home' }"><i @click="test">&#xE87E;</i></router-link>