VueJs - Элемент пользовательского интерфейса el-select: Как получить значение parent и child

Question

У меня есть случай с el-select-group, когда я использую el-select-group и данные, у которых есть дочерний элемент [], нельзя выбрать вариант, это мои данные

data() {
  return {
    options3: [{
      label: 'Popular cities',
      options: [{
        value: 'Shanghai',
        label: 'Shanghai'
      }, {
        value: 'Beijing',
        label: 'Beijing'
      }]
    }, {
      label: 'Indonesia',
      options: [{
        value: 'Jakarta',
        label: 'Jakarta'
      }, {
        value: 'Bandung',
        label: 'Bandung'
      }]
    }, {
      label: 'Singapore',
      options: []
    }, {
      label: 'Thailand',
      options: []
    }],
    value7: ''
  }
}

Ожидается: я хочувыбранный вариант, когда у него есть дети и когда ребенок является [], его можно выбрать.

вот мой код https://jsfiddle.net/dede402/jruzj07d/

Answer 1

Есть 2 варианта:

1. Добавить параметры к вашим данным { label: 'Singapore', options: [{ value: 'Singapore', label: 'Singapore' }] }

2. Изменить шаблон: <template> <el-select v-model="value7" placeholder="Select"> <template v-for="group in options3"> <el-option-group v-if="group.options.length > 0" :key="group.label" :label="group.label"> <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-option-group> <el-option v-else :key="group.label" :label="group.label" :value="group.label"> </el-option> </template> </el-select> </template>