Значения в ячейка по информации из массива

Question

подскажите, у меня есть таблица и в ней есть 31 ячейка которая соответствует количеством дней в месяце

<td v-for="n in 31">?</td>

и есть отдельный массив с пользователем и значением в конкретном дне

[
  {
    "id": "1",
    "name": "Петров Иван",
     days: [
        {
          "day": "8",
          "name": "x",
        },
        {
          "day": "11",
          "name": "x",
        },
        {
          "day": "19",
          "name": "x",
        },
     ],
  },
]

Как мне вывести все эти ячейки с значением ? а в ячейках 8, 11, 19 проставить значение x

Answer 1

Для начала я бы превратил все данные пользователей в плоский список выбрав все указанные дни и далее просто идет проверка при выводе.

new Vue({
  el: '#app',
  data: {
    selectedUsers: [],
    users: [
      {
        "id": "1",
        "name": "Петров Иван",
         days: [
            {
              "day": "8",
              "name": "x",
            },
            {
              "day": "11",
              "name": "x",
            },
            {
              "day": "19",
              "name": "x",
            },
         ],
      },
      {
        "id": "2",
        "name": "Петров Вася",
         days: [
            {
              "day": "12",
              "name": "x",
            },
            {
              "day": "21",
              "name": "x",
            },
            {
              "day": "30",
              "name": "x",
            },
         ],
      },
    ]
  },
  created() {
    this.selectedUsers = this.users.reduce((res, item) => {
      const tempItem = {
        id: item.id,
        days: {}
      }
      
      tempItem.days = item.days.reduce((carry, {day, name}) => {
        carry[day] = name;
        return carry;
      }, {});
      res.push(tempItem)
      return res;
    }, []);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="user in selectedUsers">
      <td v-for="n in 31">
       {{user.days[n] ? user.days[n] : '?'}}
      <td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

Значения в ячейка по информации из массива

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