Вывести массив в Vue selectom

Question

        test: [
            {
                id: 1,
                name: 'Первая группа',
                hall:[
                    {
                        id: 25,
                        day: 1,
                        time: 8
                    },
                    {
                        id: 26,
                        day: 2,
                        time: 12
                    },
                ]
            },
            {
                id: 2,
                name: 'Вторая группа',
                hall:[
                    {
                        id: 27,
                        day: 6,
                        time: 9
                    },
                    {
                        id: 28,
                        day: 7,
                        time: 13
                    },
                ]
            }
        ],

Подскажите пожалуйста как вывести в select option такого плана

<select>
    <option>Первая группа - (25 - 8, 26 - 12)</option>
    <option>Вторая группа - (27 - 9, 28 - 13)</option>
</select>

Answer 1

<select>
  <option v-for="t in test" :key="t.id">{{ t.name }} - ( {{ t.hall[0].id }} - {{ t.hall[0].time }}, {{ t.hall[1].id }} - {{ t.hall[1].time }} )</option>
</select>

data: () => ({
  test: [
    {
      id: 1,
      name: 'Первая группа',
      hall:[
          {
              id: 25,
              day: 1,
              time: 8
          },
          {
              id: 26,
              day: 2,
              time: 12
          },
      ]
    },
    {
        id: 2,
        name: 'Вторая группа',
        hall:[
            {
                id: 27,
                day: 6,
                time: 9
            },
            {
                id: 28,
                day: 7,
                time: 13
            },
        ]
    }
  ],
}),

Answer 2

Используйте метод для формирования каждого элемента для select:

например:

funcTest(items) {
 return items.map(x => `${x.id} - ${x.time}`).join(', ')
}

и рабочий пример для наглядности

const app = new Vue({
  el: "#app",
  data: {
    test: [{
        id: 1,
        name: 'Первая группа',
        hall: [{
            id: 25,
            day: 1,
            time: 8
          },
          {
            id: 26,
            day: 2,
            time: 12
          },
        ]
      },
      {
        id: 2,
        name: 'Вторая группа',
        hall: [{
            id: 27,
            day: 6,
            time: 9
          },
          {
            id: 28,
            day: 7,
            time: 13
          },
        ]
      }
    ],
  },
  methods: {
    funcTest(items) {
      return items.map(x => `${x.id} - ${x.time}`).join(', ')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select>
    <option v-for="item in test">{{ item.name }} - ({{ funcTest(item.hall) }})</option>
  </select>
</div>

БЛОГ НА HUSL

Вывести массив в Vue selectom

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