Vuetify가 툴팁을 트리거합니다.

Question

vuetify를 사용하고 있으며 버튼 위에 도구 설명이 있습니다. 마우스를 올려 놓거나 클릭 할 때 툴팁을 표시하지 않고 일부 이벤트가 트리거되면 툴팁을 표시하고 싶습니다.

translate.vue

<v-tooltip v-model="item.showTooltip" top>
  <template v-slot:activator="{}">
    <v-btn @click="translateItem(item)"> Call API to translate</v-btn>
  </template>
  <span>API quota limit has been reached</span>
</v-tooltip>


<script>
export default(){
  props: {
    item: { default: Objet}
  }
 methods: {
   translateItem: function (item) {
     axios
       .post(baseURL + "/translateAPI", {
         text: item.originTrad;
       })
       .then((res) => {
          if (apiQuotaLimitReached(res) { 
            // If limit is reached I want to show the tooltip for some time
            item.showTooltip = true;
            setTimeout(() => {item.showTooltip = false;}, 3000);
            } else  { ..... }}}
</script>

itemSelect.vue (객체 항목을 만든 다음 라우터 푸시를 사용하여 번역 페이지로 전송)

<script>
export default(){
 methods: {
   createItem: function () {
     item.originTrad = "the text to translate"
     ....
     item.showTooltip = false;
     this.$router.push({
       name: "translate",
       params: {
            "item": item,
       },
     });  }}
</script>

당신이 볼 수 있듯이 나는를 제거 v-slot:activator="{ on }"하고 v-on="on"난 exemple에 발견 :https://vuetifyjs.com/fr-FR/components/tooltips/, 마우스 오버시 툴팁을 표시하고 싶지 않기 때문입니다. 하지만 예상대로 작동하지 않고 툴팁이 제대로 표시되지 않습니다. 약간의 도움이 좋을 것입니다 :)

Answer 1

우선, 자식 구성 요소에서 소품을 변경하려고합니다. 이렇게하면 안됩니다.

[Vue warn] : 부모 컴포넌트가 다시 렌더링 될 때마다 값을 덮어 쓰게되므로 prop을 직접 변경하지 마십시오. 대신 소품의 값에 따라 데이터 또는 계산 된 속성을 사용하십시오. 변경되는 소품 : "item.showTooltip"

그래서 (항목 perse의 속성 일 필요는 없습니다) showTooltip에 대해 별도의 데이터 변수를함으로써 시작하고 (물론 변화의 발생을 확인하려면 true로 설정 시도 v-model="item.showTooltip"에 v-model="showTooltip"V-툴팁에)