2
        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>
2
  • Приложите пример, каким должен быть результирующий html код
    – Talleyran
    27 июл 2020 в 21:59
  • поправил вопрос 28 июл 2020 в 4:49

2 ответа 2

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>

2
<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
            },
        ]
    }
  ],
}),
2
  • Вы использовали индех из массива [0], [1], только вот количество элементов массива заранее не известно, нужно использовать foreach 28 июл 2020 в 5:51
  • 1
    Я сделал как было указано в условии. Создайте какой то метод который будет принимать hall и возвращать строку собранную из всех элементов массива(reduce здесь будет уместнее). И уже этот метод вызывайте в option
    – fortavey
    28 июл 2020 в 6:22

Ваш ответ

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

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