悬停时 Vuetify 工具提示 refresh/rerender

Question

我有一个 vuetify tooltip 组件。在工具提示中我有一个 {{date | moment}}。我得到一个静态 a few seconds ago.

我希望每次将鼠标悬停在按钮上时，将按钮工具提示刷新为当前经过的时间（例如 10 minutes ago）。我不知道如何使用更新后的过滤器重新呈现悬停时的工具提示。

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

Answer 1

如果我理解正确的话，这个思路可能会对你有所帮助（下面是代码笔link）：

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)}`;
  }
} })

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

悬停时 Vuetify 工具提示 refresh/rerender

Vuetify tooltip refresh/rerender on hover

javascript

date

momentjs

vue.js

vuetify.js