javascript - Vuetify 工具提示在悬停时刷新/重新渲染

Question

我有一个 vuetify tooltip 零件。在工具提示中，我有一个 {{date | moment}} .我得到一个静态的 a few seconds ago .
我希望每次将鼠标悬停在按钮上时，将按钮工具提示刷新到当前耗时(例如 10 minutes ago)。
我不知道如何使用更新的过滤器在悬停时重新呈现工具提示。

filters: {
    moment: function (date) {
      return moment(date).fromNow();
    },
}, 

Answer 1

如果我正确理解您要实现的目标，这个想法可能会对您有所帮助(以下是代码笔链接):
simulated elapsed time on button hover

<div id="app">
  <v-app id="inspire">
   <div class="text-center d-flex align-center justify-space-around">
     <v-tooltip bottom>
       <template v-slot:activator="{ on, attrs }">
         <v-btn
          color="primary"
          dark
          class="mt-10"
          v-bind="attrs"
          v-on="on"
          @mouseover="setElapsedTime"
          >
           Button
          </v-btn>
       </template>
    <span>{{ elapsedTime }}</span>
  </v-tooltip>
</div>

new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data() {
   return {
     startTime: Date.now(),
     elapsedTime: '',
   }
 },
methods: {
  setElapsedTime() {
    const millis = Date.now() - this.startTime;
    this.elapsedTime = `seconds elapsed = ${Math.floor(millis / 1000)}`;
  }
} })

工具提示文本绑定(bind)到数据对象中的变量，每当用户将鼠标悬停在按钮上时，都会调用一个方法来更新数据对象中的变量