Как в select положить все значения включая вложенные из массива объектов?

Для того чтобы вставить все значения, включая вложенные из массива объектов в элемент <select> в Vue.js, вам потребуется использовать директиву v-for вместе с горизонтальным свойством обхождения объекта.

Предположим, у вас есть массив объектов options, который содержит значения, которые вы хотите включить в <select>. Каждый объект в options может содержать свойство value, которое представляет значение, которое будет отображаться в <select>, и свойство nestedOptions, которое содержит массив объектов, представляющих вложенные значения.

Пример:

HTML:

<select>
  <option v-for="option in options" :value="option.value">
    {{ option.value }}
  </option>
</select>

JavaScript:

data() {
  return {
    options: [
      {
        value: 'Option 1',
        nestedOptions: [
          { value: 'Nested Option 1' },
          { value: 'Nested Option 2' },
          { value: 'Nested Option 3' }
        ]
      },
      {
        value: 'Option 2',
        nestedOptions: [
          { value: 'Nested Option 4' },
          { value: 'Nested Option 5' },
          { value: 'Nested Option 6' }
        ]
      },
      {
        value: 'Option 3',
        nestedOptions: [
          { value: 'Nested Option 7' },
          { value: 'Nested Option 8' },
          { value: 'Nested Option 9' }
        ]
      },
    ]
  }
}

В данном примере мы используем директиву v-for, чтобы обойти массив объектов options. Для каждого объекта, мы создаем <option> элемент с использованием свойства value объекта, чтобы задать значение элемента <option>. Внутри элемента <option> мы отображаем значение, указанное в свойстве value объекта.

Если у объекта есть свойство nestedOptions, вы можете использовать вложенную директиву v-for для обхода вложенного массива объектов. Пример с вложенными значениями показывает это.

Если вы используете Vue.js совместно с фреймворком как Vuetify или Element UI, они предоставляют готовые компоненты <select> с поддержкой вложенных значений из коробки. В таком случае, вам не придется создавать элемент <select> и описывать его логику самостоятельно, просто используйте компонент, предоставленный фреймворком. Это позволит вам сэкономить время и упростить разработку.