VueJs - Element UI el-select: How to get value parent and child

Question

I've case with el-select-group when i use el-select-group and data the child is [], option can not be select it's my data

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: ''
  }
}

Expected: I want selected option when it has chidren and when child is [], it can be selected.

here is my code https://jsfiddle.net/dede402/jruzj07d/

Answer 1

There are 2 options:

1. Add options to your data

   {
     label: 'Singapore',
     options: [{
     value: 'Singapore',
     label: 'Singapore'
    }]
   }
   

2. Change template:

    <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>