Vuetify v-btn 클릭 이벤트

Vuetify v-btn 클릭 이벤트

vuetify를 사용하고 있는데 v-btn 컴포넌트가 클릭되었을 때 메서드를 호출하려고 합니다.하지만 효과가 없는 것 같아요.

제 코드입니다.

<v-btn @click="bookmarkSave()">
    <v-icon v-if="!isBookmarked">bookmark_border</v-icon>
    <v-icon v-else>bookmark</v-icon>
</v-btn>

그리고 컴포넌트(메서드 섹션)에서 다음과 같이 메서드를 선언했습니다.

bookmarkSave : async function () {
                  const response = await axios.get('api/bookmark-kaydet?voice_id=' + this.audio.id);
                 console.log(response);
               }

클릭 이벤트에서 bookmarkSave() 메서드를 호출할 수 없었습니다.그리고 네이티브 옵션도 써봤어요.내 코드에 무슨 문제가 있는지 알고 있나요?또는 v-btn 컴포넌트에 대한 클릭 이벤트를 표시하려는 사용자

버튼을 클릭해도 콘솔에러나 네트워크 로그는 표시되지 않습니다.vue 도구에서 일부 출력만 볼 수 있습니다.저는 그것에 대한 이미지를 추가했습니다.

기본 컴포넌트에는 이 이벤트가 없기 때문에 @click, as@click.native="func"에 .click을 첨부하면 문제가 없습니다.

또한 컴포넌트를 이 기능을 가진 네이티브 html 요소(div)로 래핑할 수도 있습니다.

도움이 됐으면 좋겠네요!

저도 같은 문제에 부딪혔어요.

해결 방법은 클릭 이벤트의 전파를 중지하는 것이었습니다.

<v-btn @click.stop="showInput = false">

저는 다음과 같은 구조를 가지고 있었습니다.

<v-list> 
  <v-list-item @click="showInput = true">
     ....
     <v-btn @click="showInput = false">
     ....

목록 항목을 클릭하는 동안 버튼을 클릭하는 것이 제대로 작동하지 않았습니다.이 경우 클릭 이벤트가 목록 항목으로 전파되어 showInput을 true로 다시 리셋합니다.

https://github.com/vuetifyjs/vuetify/issues/35#issuecomment-269239541

구성 요소에서 사용되는 v-on은 이제 해당 구성 요소에서 $emitted된 사용자 지정 이벤트만 수신합니다.루트 요소에서 네이티브 DOM 이벤트를 수신하려면 .native 수식자를 사용합니다.예를 들어 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/56722576/vuetify-v-btn-click-event