Как передать параметр в computed Vue.js?

Question

vetsmen @vetsmen

Vue.js

Как передать параметр в computed Vue.js?

Задача: нужно для каждого элемента прикрепить свой таймер для обратного времени. Каждый элемент имеет свое время.
Что я делаю: создал setInterval, который каждую секунду пушит в переменную текущее время.
Создал 2 computed свойства:

getMinutes: function (time) {
		    	return Math.trunc((time - this.now) / 1000 / 60) % 60;
		    },
		    getSeconds: function (time) {
		    	return ((time - this.now) / 1000) % 60;
		    }

И вызываю их вот так:

{{ getMinutes(item.offer_timestamp) }} : {{ getSeconds(item.offer_timestamp) }}

Однако пишет, что t.getMinutes is not a function.
Пробовал то же самое в watch, аналогичная ситуация.
Как я понял, ни через computed, ни через watch нельзя пробросить переменную. Как быть?

Вопрос задан более трёх лет назад
1857 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

7 комментариев

vetsmen @vetsmen Автор вопроса

А как мне сделать вызов фильтра раз в секунду?

Написано более трёх лет назад
Анатолий Жаров @SeaBreeze876

vetsmen, при обновлении свойства в data компонент будет перерисовываться -> будет вызываться фильтр

Написано более трёх лет назад
vetsmen @vetsmen Автор вопроса

Анатолий Жаров, у меня не обновляется само свойство, которое фильтруется, оно постоянно. У меня обновляется текущее время, которое записано в совершенно другую переменную. И при его обновлении мне как раз нужно вызывать фильр.

Написано более трёх лет назад
Анатолий Жаров @SeaBreeze876

vetsmen, есть возможность показать код?

Написано более трёх лет назад

vetsmen @vetsmen Автор вопроса

data: () => {
			return {
				timer: '',
				now: Date.now()
			}
		},
		filters: {
			getMinutes: function (time) {
				return Math.trunc((time - Date.now()) / 1000 / 60) % 60;
			},
			getSeconds: function(time) {
				return Math.trunc((time - Date.now()) / 1000) % 60;
			}
		},
		methods: {
		    fetchTimers() {
		    	this.now = Date.now();
		    }
		},
		created () {
			this.$store.state.loader = true;
			this.timer = setInterval(this.fetchTimers, 1000);
		}

Ну и в нужных местах вызываю:

{{ item.offer_timestamp | getMinutes }}:{{ item.offer_timestamp | getSeconds }}

this.now сейчас никуда не привязан, в фильтр его сунуть нельзя, что делать - не знаю

Написано более трёх лет назад

Анатолий Жаров @SeaBreeze876

vetsmen, item это элемент в списке? Можно попробовать сделать локальный компонент для item, в props ему передавать this.now и item, в computed считать все что требуется

Написано более трёх лет назад
vetsmen @vetsmen Автор вопроса

Анатолий Жаров, сделал так: { (item.offer_timestamp - now) | filter }, все заработало

Написано более трёх лет назад