Как применить функции / операторы к результату пользовательского фильтра VueJS?

Question

Я использую фильтр Vue (названный timeconverter), чтобы изменить формат даты строки. Я хочу проверить, меньше ли результат {{ time | timeconverter }}, чем текущее время.

Как мы можем применить функции JavaScript к результату фильтра?

Например:

{{ time | timeconverter }}.length() 

OR:

{{ time | timeconverter }} > Date.now()

Я хочу отобразить div (как показано ниже) в зависимости от того, больше ли {{ time | timeconverter }}, чем текущее время.

<div>
 {{ time | timeconverter }}<span>min</span>
</div>

Answer 1

Это "не" возможно и не рекомендуется. Только если вы хотите использовать сравнение в своем представлении вашей строки, вы можете это сделать, но все же я бы порекомендовал. Если вы хотите сделать что-то вроде этого:

{{ time | timeconverter | afterNow}}

Итак, сначала, что такое фильтр:

Функция фильтра всегда получает значение выражения (результат предыдущей цепочки)

Так что, вероятно, вы анализируете результат преобразователя времени обратно в дату и сравниваете его с текущей датой. И это «только» можно использовать в фильтре

Вместо этого используйте метод или вычисленное значение.

Answer 2

Технически, фильтр можно вызвать напрямую через $options.filters.nameOfFilter:

<div v-if="$options.filters.timeconverter(time) > Date.now()">
  {{ time | timeconverter }}<span>min</span>
</div>

Vue.filter('timeconverter', value => moment(value).valueOf())

new Vue({
  el: '#app',
  data: () => ({
    time: '04 Dec 2025 00:12:00 GMT'
  }),
  mounted() {
    console.log('timeconverter', this.$options.filters.timeconverter(this.time))
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/moment@2.24.0/moment.js"></script>

<div id="app">
  <input v-model="time" placeholder="time">
  <div v-if="$options.filters.timeconverter(time) > Date.now()">
    {{ time | timeconverter }}<span>min</span>
  </div>
  <div v-else>Nothing to see</div>
</div>

Или с вычисленными подпорками, чтобы избежать запуска фильтра дважды (один раз в v-if и снова внутри <div>):

<template>
  <div v-if="filteredTime > Date.now()">
    {{ filteredTime }}<span>min</span>
  </div>
</template>

<script>
export default {
  computed: {
    filteredTime() {
      return this.$options.filters.timeconverter(this.time)
    }
  }
}
</script>

Vue.filter('timeconverter', value => moment(value).valueOf())

new Vue({
  el: '#app',
  data: () => ({
    time: '04 Dec 2025 00:12:00 GMT'
  }),
  computed: {
    filteredTime() {
      return this.$options.filters.timeconverter(this.time)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/moment@2.24.0/moment.js"></script>

<div id="app">
  <input v-model="time" placeholder="time">
  <div v-if="filteredTime > Date.now()">
    {{ filteredTime }}<span>min</span>
  </div>
  <div v-else>Nothing to see</div>
</div>