Блог

У меня есть компонент всплывающей подсказки vuetify. Во всплывающей подсказке у меня есть {{date | moment}} . Я получаю статическое a few seconds ago сообщение.

Я хочу каждый раз, когда я наведу курсор на кнопку, обновлять всплывающую подсказку кнопки до текущего прошедшего времени ( 10 minutes ago например). Я не могу понять, как повторно отобразить всплывающую подсказку при наведении с помощью обновленного фильтра.

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

Если я правильно понял, чего вы пытаетесь достичь, эта идея может вам помочь (ниже приведена ссылка code pen):

смоделированное прошедшее время при наведении курсора мыши на кнопку

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

текст всплывающей подсказки привязан к переменной в объекте данных, всякий раз, когда пользователь наводит курсор на кнопку, вызывается метод, который обновляет переменную в объекте данных