0

我动态创建了 4 个按钮并向按钮添加了自定义属性。每当我按下按钮时，我都会检查事件并尝试使用添加的属性值。如果我查看浏览器开发者工具，在按钮标签下有一个 SPAN 标签，所以当我点击 SPAN 标签部分时，会读取 SPAN 标签的属性。在 SPAN 标签之外单击是可以的。我怎样才能只获得 btn 点击事件？

<v-row>
    <v-col v-for="(num, index) in getButtonCount" :key="index">
        <v-badge bordered color="error" :content="num" overlap left>
        <v-btn
            color="warning"
            width="130px"
            height="40px"
            dark
            @click="solveQuestion"
            :answer="answer[index].isTrue"
        >
            {{ answer[index].desc }}
        </v-btn>
        </v-badge>
    </v-col>
    </v-row>

下面是开发者工具中转换后的 html 标签。

<button type="button" class="v-btn v-btn--contained theme--dark v-size--default warning" answer="true" style="height: 40px; width: 130px;">
    <span class="v-btn__content"> Testing
    </span>
</button>
4

1 回答 1

0

如果您只想触发按钮而不是其父按钮，请使用stop事件处理程序

Vue 文档的这一部分是您需要的

因此，假设该按钮嵌套在另一个单击事件中，您可以这样做：

<v-row>
    <v-col v-for="(num, index) in getButtonCount" :key="index">
        <v-badge bordered color="error" :content="num" overlap left>
        <v-btn
            color="warning"
            width="130px"
            height="40px"
            dark
            @click.stop="solveQuestion"
            :answer="answer[index].isTrue"
        >
            {{ answer[index].desc }}
        </v-btn>
        </v-badge>
    </v-col>
    </v-row>

快乐编码

于 2020-12-28T08:51:00.870 回答