Вычисляемое свойство не возвращается в шаблон

Question

Столкнулся с проблемой при использовании вычисляемого свойства Vue.

Шаблон:

<template #headerIcons>
      <div class='card-label alert alert-success font-sm text-dark-gray'>
        {{ statusLabel }}
      </div>
    </template>

js:

data() {
    return {
        statusList: [
            {
                id: 'active',
                label: 'Актуальный',
                class: 'alert-success',
            },
            {
                id: 'expiry',
                label: 'Неактуальный',
                class: 'alert-danger',
            }
        ]
    }
},
computed: {
            statusLabel: function () {
                this.statusList.forEach((status) => {
                    if (this.item.status === status.id) return status.label;
            });
    }
}

Код работает (если вместо return использоватьconsole.log, то в консоли будет выводиться верное значение), но не выводит вычисленное значение в шаблон. Ошибок в консоли нет, в чем причина?

Answer 1

Метод forEach() выполняет функцию callback один раз для каждого элемента массива; в отличие от методов every() и some(), он всегда возвращает значение undefined.

Попробуйте так

 let res = this.statusList.find((status) => {
                if (this.item.status === status.id) return true;
 });
 return res.label;

БЛОГ НА HUSL

Вычисляемое свойство не возвращается в шаблон

Ответы (1 шт):