0

подскажите, у меня есть таблица и в ней есть 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

1 ответ 1

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>

5
  • Спасибо, отличное решение !!! Подскажите а если у меня несколько пользователей ? Как мне перебрать и вывести корректно ? Commented 3 июн. 2020 в 11:41
  • @Федотов т.е. у каждого пользователя свой <tr> получается со своими выделенными ячейками <td> я правильно понял? если да, то решение будет отличаться Commented 3 июн. 2020 в 11:45
  • Все верно у каждого пользователя свой tr с td Commented 3 июн. 2020 в 11:49
  • @Федотов дополнил ответ! Commented 3 июн. 2020 в 11:56
  • Спасибо тебе добрый человек! Commented 3 июн. 2020 в 12:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.