vue.js - 子级和父级涟漪触发

Question

我正在使用 vuetify 设计一个“卡片”组件。

我有一个带有子按钮的父 div。现在，当我单击该按钮时，将触发 div 上的涟漪效果。

我该如何解决这个问题？

<template>

  <div>

    <v-card v-ripple="true">
      <h3>
        <v-card-title>{{ title }}</v-card-title>
      </h3>

      <v-layout row>
        <v-flex grow>
          <v-card-text>
            {{ plaats }}
            <br />
            {{ sub_title }}
          </v-card-text>
        </v-flex>

        <v-flex shrink>
          <v-card-actions>

            <v-btn small color="blue" fab>
              <v-icon medium color="white">mdi-calendar</v-icon>
            </v-btn>

            <v-btn small color="green" fab>
              <v-icon medium color="white">mdi-calendar-check</v-icon>
            </v-btn>

            <v-btn small color="red" fab>
              <v-icon medium color="white">mdi-calendar-remove</v-icon>
            </v-btn>

          </v-card-actions>
        </v-flex>

      </v-layout>
    </v-card>

  </div>

</template>

Answer 1

解决方案确实是 Event.stopPropagation 但我必须将它添加到 mousedown 操作中。所以 @mousedown.stop 然后用 @click.stop="null" 添加你的函数，就像@Frank 之前提到的那样。