Как разложить массив во vue js?

Question

[voldev vvv]

Есть такой вызов

<TableMainDay v-for="day in table.DAYS"
                  @click-day="clickDay"
                  :key="day.id"
                  :day="day"
                  :showPeriod="showPeriod"
                  :listInfo="listInfo"
    ></TableMainDay>

в нём я перебираю то что хранится в table.DAYS, но в этом компоненте мне нужно ещё перебрать table.WORK, можно ли сделать двойной v-for ? на подобие v-for="day in table.DAYS" or works in table.WORK

Answer 1

[Wispik]

Сделать computed свойство, в котором объединять table.DAYS и table.WORK

Comments

[voldev vvv]

можно пример ?

[Wispik]

Evgeniy Evsyukov,

computed: {
    newArray() {
        return this.DAYS.concat(this.WORK)
    }
}

[voldev vvv]

пытаюсь вот так

<TableMainDay v-for="day innewArray()"
                  @click-day="clickDay"
                  :key="day.id"
                  :day="day"
                  :showPeriod="showPeriod"
                  :listInfo="listInfo"
    ></TableMainDay>

ошибка

[Wispik]

Evgeniy Evsyukov,
v-for="day in newArray()"
пробел пропустил

[voldev vvv]

Wispik, ошибка _vm.newArray is not function

[Wispik]

Evgeniy Evsyukov, скобки там не нужны, это же не функция
v-for="day in newArray"

[voldev vvv]

Wispik, почему-то newArray() не содержит элементы этого массива this.WORK

[Wispik]

Evgeniy Evsyukov, ну поменяй переменные на свои (я не заметил как они правильно называются)
return this.table.DAYS.concat(this.table.WORK)

[voldev vvv]

Wispik, да я по вашему подобию делаю, не получается, ключей в новом массиве нет

[Wispik]

Evgeniy Evsyukov, структура объектов в этих массивах одинаковая? Покажи пример первого и второго

[voldev vvv]

Wispik,
this.table.DAYS
30 элементов

0: {…}
BLOCKED: 
CAN_EDIT: 
CHANGED_AT: 
COLOR_CODE: 
CREATED_AT: 
DATE: 
DATE_STR: 
DURING: 
EVENT_CODE: 
ID: 
IS_IN_CKR: 
IS_IN_NLMK: 
ITEMS: 
LINE_ID: 
PLAN_TIME_END: 
PLAN_TIME_START: 
REQUESTS:

и
this.table.WORK так же 30 элементов

0: {…}
ID: 
UF_CODE: 
UF_COMPANY_ID: 
UF_DESCRIPTION: 
UF_SCHEDULE_ID:

[Wispik]

Evgeniy Evsyukov, А, ну так это вообще разные объекты, тогда не понятно, как они должны в одной таблице выводится.
Если имелось в виду, что нужно объединить элементы двух массивов по id, то это также надо в computed делать (как это сделать, быстро гуглится)

[voldev vvv]

Wispik, у меня айдишники в массиве разные

[voldev vvv]

Wispik, а можно просто написать метод который циклом их перебирает, и засунуть сюда

<TableMainDay v-for="day in table.DAYS"
                  @scheck-Work="checkWork"
    ></TableMainDay>

[Wispik]

Evgeniy Evsyukov, тогда вообще не понятно, что требуется

[voldev vvv]

Wispik, мне нужно что бы два этих объекта

0: {…}
BLOCKED: 
CAN_EDIT: 
CHANGED_AT: 
COLOR_CODE: 
CREATED_AT: 
DATE: 
DATE_STR: 
DURING: 
EVENT_CODE: 
ID: 
IS_IN_CKR: 
IS_IN_NLMK: 
ITEMS: 
LINE_ID: 
PLAN_TIME_END: 
PLAN_TIME_START: 
REQUESTS:

и

0: {…}
ID: 
UF_CODE: 
UF_COMPANY_ID: 
UF_DESCRIPTION: 
UF_SCHEDULE_ID:

были единым, например:

BLOCKED: 
CAN_EDIT: 
CHANGED_AT: 
COLOR_CODE: 
CREATED_AT: 
DATE: 
DATE_STR: 
DURING: 
EVENT_CODE: 
ID: 
IS_IN_CKR: 
IS_IN_NLMK: 
ITEMS: 
LINE_ID: 
PLAN_TIME_END: 
PLAN_TIME_START: 
REQUESTS:
UF_COMPANY_ID: 
UF_DESCRIPTION: 
UF_SCHEDULE_ID:

[Wispik]

Evgeniy Evsyukov, так и надо было сразу вопрос задавать

computed: {
    newArray() {
        let res = []
        for (i = 0; i < this.table.DAYS.length; i++) {
            res.push(Object.assign(this.table.DAYS[i], this.table.WORK[i]))
        }
        return res
    }
}

Этот код будет нормально работать, если длина массивов одинаковая

[voldev vvv]

Wispik, Спасибо! Получилось!