Блог

У меня есть этот файл pug, в котором я хочу сравнить системную дату с датой в объекте с помощью VueJS.

Это то, что у меня есть. Я напечатал системную дату, используя эту строку div #{new Date()} , которая выводит Mon Oct 18 2021 10:46:39 GMT 0800 (Malaysia Time)

Я также напечатал дату, используя этот синтаксис vue div {{event.details.meta.date}} , который выводит 2021-10-17

Вопрос в том, как мне преобразовать эту дату из строки в тип данных, а затем сравнить ее с системной датой?

Я пытался, div #{new Date("event.details.meta.date")} но результат Invalid date

Я пытался div(v-if="isEventActive(event.details.meta.date)")

и

 computed: {
  isEventActive(_eventDate) {
    var eventDate = new Date(_eventDate);
    return new Date() < eventDate;
  }, 
}
 

Но он говорит isEventActive is not a function

Вычисляемые свойства Vue не принимают параметры. Это возвращаемое значение функции, которое отображается в вашем шаблоне.

Чтобы решить вашу проблему, вы можете либо:

1. переместите вашу isEventActive функцию в methods раздел или
2. используйте вычисляемое свойство и возвращайте функцию.

Первый подход выглядит следующим образом:

 methods: {
    isEventActive(_eventDate) {
        var eventDate = new Date(_eventDate);
        return new Date() < eventDate;
    }, 
}
 

Если это не работает (т. Е. Страница не обновляется должным образом при изменениях eventDate ), попробуйте это:

 computed: {
    isEventActive() {
        return function(_eventDate) {
            var eventDate = new Date(_eventDate);
            return new Date() < eventDate;  
        }
    }
}
 

div #{new Date("event.details.meta.date")} выводит Invalid date , потому что строка "event.details.meta.date" не является допустимым значением для Date() конструктора.

div #{new Date(event.details.meta.date)} с другой стороны, должно выводиться что-то вроде Mon Oct 17 2021 08:00:00 GMT 0800 (Malaysia Time) , потому что вы передаете конструктору значение event.details.meta.date , которое, по-видимому '2021-10-17' , Date() есть.

div(v-if="isEventActive(event.details.meta.date)") выводит <div v-if="isEventActive(event.details.meta.date)"></div> .

Вы, вероятно, хотите это вместо этого : <div v-if="isEventActive('2021-10-17')"></div> . Тогда в вашем isEventActive методе значение _eventDate параметра будет '2021-10-17' . (Возможно, я не знаком с Vue.)

Итак, вы могли бы попробовать это:

 // Input (Vue):
div(v-if=`isEventActive('${event.details.meta.date}')`)

// Output (HTML):
<div v-if="isEventActive('2021-10-17')"></div>
 

То же самое, но без шаблонного литерала:

 // Input (Vue):
div(v-if="isEventActive('"   event.details.meta.date   "')")

// Output (HTML):
<div v-if="isEventActive('2021-10-17')"></div>