Как во vue обрабатывать данные в цикле?

Question

[WebDev]

Здравствуйте,
Например у меня есть массив объектов users, у каждого поля есть временная метка, из которой мне нужно отдельно вытащить год, отдельно время.
Если бы это был не массив, то я бы использовал computed, но для массива я описываю метод и вызываю его в цикле:

<div v-for="user in users">
    <span>{{ getCreatedYear(user.created_at) }}</span>
    <span>{{ user.name }}</span>
    <span>{{ getCreatedTime(user.created_at) }}</span>
</div>

Как правильно обрабатывать данные в таком случае?

Answer 1

[Roman K]

Создаёшь модель юзера

class User {
    // Это позволяет оборачивать в модель данные из API
    // как-то так: `state.users.push(new User(dataFromAPI));`
    constructor({ name, created_at }) {
        this.name = name;
        this.createdAt = created_at;
    }
    
    // Создаёшь нужные методы и геттеры 
    get createdYear() {
        return this.createdAt.getYear();  // или чё там у тебя
    }
}

Вуаля. Никакого колхоза с фильтрами и методами, которые нужно копировать из компонента в компонент или делать не-вполне-очевидные миксины.

<div v-for="user in users">
    <span>{{ user.createdYear }}</span>
    <span>{{ user.name }}</span>
    <span>{{ user.createdTime }}</span>
</div>

Answer 2

[Konstantin Malyarov]

Через фильтр.
{{user.created_at | getCreatedYear}}

Vue.filter('getCreatedYear', function (value) {
return // тут ваш метод
})