blocks|key|3798463|text|您可以使用v-btn代替徽章插槽的div|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3798464|<v-badge>
++<v-btn+slot="badge"+@click="togglePopover">
++++<v-icon>done</v-icon>
++</v-btn>
</v-badge>|code-block|syntax|javascript|3798465|​|3798466|new+Vue({
++el:+'#app',
++methods:+{
++++togglePopover()+{
++++++console.log('click');
++++}
++}
})|3798467|@import+url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900%7CMaterial%2BIcons);
@import+url(https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css);

#app+{
++padding-top:+20px;
}|3798468|<script+src="https://unpkg.com/vue@2.5.17"></script>
<script+src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>

<div+id="app">
++<v-app+id="inspire">
++++<div+class="text-xs-center">
++++++<v-badge
++++++++color="purple"
++++++++left
++++++++overlap
++++++>
++++++++<v-btn+slot="badge"
+++++++++++++++flat
+++++++++++++++icon
+++++++++++++++dark
+++++++++++++++small
+++++++++++++++:ripple="false"
+++++++++++++++@click="togglePopover">
++++++++++<v-icon>done</v-icon>
++++++++</v-btn>
++++++++<v-icon
++++++++++color="grey+lighten-1"
++++++++++large
++++++++>
++++++++++account_circle
++++++++</v-icon>
++++++</v-badge>
++++</div>
++</v-app>
</div>|3798469|3798470|entityMap|0|LINK|mutability|MUTABLE|url|https://vuetifyjs.com/en/components/buttons^0|5|5|H|3|5|5|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|S|3|L|5|6|7|1E|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Instead of a <code>div</code> for the badge slot, you can use a <a href="https://vuetifyjs.com/en/components/buttons" rel="nofollow noreferrer"><code>v-btn</code></a>:</p>

<pre><code>&lt;v-badge&gt;
  &lt;v-btn slot="badge" @click="togglePopover"&gt;
    &lt;v-icon&gt;done&lt;/v-icon&gt;
  &lt;/v-btn&gt;
&lt;/v-badge&gt;
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',
  methods: {
    togglePopover() {
      console.log('click');
    }
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);
@import url(https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css);

#app {
  padding-top: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.17"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"&gt;&lt;/script&gt;

&lt;div id="app"&gt;
  &lt;v-app id="inspire"&gt;
    &lt;div class="text-xs-center"&gt;
      &lt;v-badge
        color="purple"
        left
        overlap
      &gt;
        &lt;v-btn slot="badge"
               flat
               icon
               dark
               small
               :ripple="false"
               @click="togglePopover"&gt;
          &lt;v-icon&gt;done&lt;/v-icon&gt;
        &lt;/v-btn&gt;
        &lt;v-icon
          color="grey lighten-1"
          large
        &gt;
          account_circle
        &lt;/v-icon&gt;
      &lt;/v-badge&gt;
    &lt;/div&gt;
  &lt;/v-app&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3798478|text|您应该在click事件上使用native修饰符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3798479|@click.native="togglePopover"|code-block|syntax|javascript|3798480|来自VueJS文档|3798481|3798482|+.native+-侦听组件根元素上的本机事件。|blockquote|3798483|3798484|3798485|有关更多信息和所有可用修饰符，请单击此处：https://vuejs.org/v2/api/#v-on|3798486|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/v2/api/#v-on^0|4|5|E|6|0|0|0|0|0|0|0|L|U|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|U|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>You should use the <code>native</code> modifier on you <code>click</code> event.</p>

<pre><code>@click.native="togglePopover"
</code></pre>

<p>From the VueJS documentation</p>

<blockquote>
  <p>.native - listen for a native event on the root element of component.</p>
</blockquote>

<p>For more information and all the available modifiers click here: <a href="https://vuejs.org/v2/api/#v-on" rel="nofollow noreferrer">https://vuejs.org/v2/api/#v-on</a></p>


blocks|key|3798498|text|对我来说，@tony19的答案不起作用，除非添加一个z索引|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3798499|<v-badge
++++bordered
++++color="red"
++++overlap
>
++++<v-icon+slot="badge"+style="z-index:+1;"+@click="doSomething">
++++++++mdi-close
++++</v-icon>
++++<v-img
++++++++class="rounded-lg"
++++++++height="100"
++++++++width="100"
++++++++aspect-ratio="1"
++++++++src="https://placekitten.com/g/300/300"
++++/>
</v-badge>|code-block|syntax|javascript|3798500|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For me, @tony19's answer did not work unless adding a z-index</p>
<pre class="lang-html prettyprint-override"><code>&lt;v-badge
    bordered
    color=&quot;red&quot;
    overlap
&gt;
    &lt;v-icon slot=&quot;badge&quot; style=&quot;z-index: 1;&quot; @click=&quot;doSomething&quot;&gt;
        mdi-close
    &lt;/v-icon&gt;
    &lt;v-img
        class=&quot;rounded-lg&quot;
        height=&quot;100&quot;
        width=&quot;100&quot;
        aspect-ratio=&quot;1&quot;
        src=&quot;https://placekitten.com/g/300/300&quot;
    /&gt;
&lt;/v-badge&gt;
</code></pre>


blocks|key|17718|text|我发现当单击徽章时，徽章附加到的项目可以工作，但徽章本身不起作用。以下是我的解决方法:添加一个div来显示内容槽，以及包装在徽章中的项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|17719|此示例使用数据值count作为徽章的内容。|offset|length|style|CODE|17720|++++++<v-badge>
++++++++
++++++++<template+#badge>
++++++++++<div
++++++++++++++style="cursor:+pointer"
++++++++++++++@click="$emit('show-settings')">
++++++++++++{{+String(count)+}}
++++++++++</div>
++++++++</template>
++++++++<v-btn+icon+@click="$emit('show-settings')">
++++++++++<v-icon>settings</v-icon>
++++++++</v-btn>
++++++</v-badge>|code-block|syntax|javascript|17721|entityMap^0|0|8|5|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I found that the item the badge was attached to works when clicked, but not the badge itself.  Here is my workaround:  Add a div to display content slot, in addition to the item wrapped in the badge.</p>
<p>This example uses data value <code>count</code> as the content of the badge.</p>
<pre class="lang-html prettyprint-override"><code>      &lt;v-badge&gt;
        &lt;!-- WORKAROUND badge is not clickable --&gt;
        &lt;template #badge&gt;
          &lt;div
              style=&quot;cursor: pointer&quot;
              @click=&quot;$emit('show-settings')&quot;&gt;
            {{ String(count) }}
          &lt;/div&gt;
        &lt;/template&gt;
        &lt;v-btn icon @click=&quot;$emit('show-settings')&quot;&gt;
          &lt;v-icon&gt;settings&lt;/v-icon&gt;
        &lt;/v-btn&gt;
      &lt;/v-badge&gt;
</code></pre>


<p>We recently started using Vue and Vuetify. As part of the application, I need to write click action on Vuetify badge, but not sure why it's not working. I tried the following code snippet:</p>

<pre><code>&lt;v-badge bottom
               left
               overlap
               :color="red"&gt;
        &lt;div slot="badge"
             @click="togglePopover"
             class="availability"&gt;&lt;/div&gt;
        &lt;Avatar :objData="data.image"
                :size="size"
                :applyBoarder="applyBoarder"&gt;
          &lt;slot&gt;&lt;/slot&gt;
        &lt;/Avatar&gt;
      &lt;/v-badge&gt;

&lt;script&gt;
  export default {
    methods: {
    togglePopover(e) {
      alert('click action');
    }
  }
&lt;/script&gt;
</code></pre>


click action not working on vuetify badge

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我们最近开始使用Vue和Vuetify。作为应用程序的一部分，我需要在Vuetify徽章上编写点击操作，但不确定为什么它不工作。我尝试了以下代码片段：<v-badge bottom               left               overlap               :color="red"> ...

问单击action working on vuetify徽章
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击action working on vuetify徽章EN