[Vue.js + vuetify.js] v-badge 콤포넌트 사용시 클릭(click)이벤트가 동작하지 않을 때 처리하는 방법

떠돌이개발자Dec 2, 2023

평소와 다름없이 클릭이벤트 처리를 위해 vadge 태그에 속성값으로 @click=”testClick();” 을 적용하였습니다. 그러나 클릭이벤트가 동작하지 않더라구요. <v-bagde>태그는 클릭 속성값을 적용할 수 없는 것일까요?

v-on:click=”testClick();” 역시 동작하지 않습니다.

<v-badge
  class="sample_tag"
  content="눌리니?"
  style="margin-right:45px;"
  color="cyan darken-1"
  @click="testClick();">
</v-badge>




......생략.....
methods: {
    testClick() {
      alert(1);
    },
......생략.....
},

해결방법에는 몇 가지가 있어요.

첫번째 방법으로 클릭이벤트 사용시 native 수정자(modifier)를 사용하여 처리하면 가능합니다.

@click.native=”testClick();”

<v-badge
  class="sample_tag"
  content="눌리니?"
  style="margin-right:45px;"
  color="cyan darken-1"
  @click.native="testClick();">
</v-badge>

두번째 방법은 badge 태그 안에 btn태그를 추가하는 것입니다.

<v-badge
	class="tag"
	color="cyan darken-1">
  	<v-btn slot="badge"  @click="testClick();">
	<v-icon>눌리니?</v-icon>
  	</v-btn>
</v-badge>


<v-badge
	color="cyan darken-1"
	left
	overlap
>
<v-btn slot="badge"
	   flat
	   icon
	   dark
	   small
	   :ripple="false"
	   @click="testClick()">
  <v-icon>눌러봐</v-icon>
</v-btn>
</v-badge>

v-on 이벤트에서 사용가능한 Modifiers 정보

v-on

Shorthand: @
Expects: Function | Inline Statement | Object
Argument: event
Modifiers:
- .stop – call event.stopPropagation().
- .prevent – call event.preventDefault().
- .capture – add event listener in capture mode.
- .self – only trigger handler if event was dispatched from this element.
- .{keyCode | keyAlias} – only trigger handler on certain keys.
- .native – listen for a native event on the root element of component.
- .once – trigger handler at most once.
- .left – (2.2.0+) only trigger handler for left button mouse events.
- .right – (2.2.0+) only trigger handler for right button mouse events.
- .middle – (2.2.0+) only trigger handler for middle button mouse events.
- .passive – (2.3.0+) attaches a DOM event with { passive: true }.

[예제코드]

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">

<!-- key modifier using keyCode -->
<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

자식 구성 요소에서 사용자 지정 이벤트 수신 대기(“my-event”가 자식에서 발생하면 핸들러가 호출됨)

<my-component @my-event="handleThis"></my-component>

<!-- inline statement -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- native event on component -->
<my-component @click.native="onClick"></my-component>

[REFERENCE]