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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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