Vue.js에서 optgroup select 라벨을 설정하는 방법

Vue.js에서 optgroup select 라벨을 설정하는 방법

Vue에서 엄선된 그룹을 만들려고 합니다.

바이올린: https://jsfiddle.net/Tropicalista/vwjxc5dq/

저도 해봤어요.

<optgroup v-for="option in options" v-bind:label="option">
  <option v-for="sub in option" v-bind:value="option.value">
   {{ sub.text }}
  </option>
</optgroup>

데이터:

data: {
  selected: 'A',
  options: {
    First: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' }
    ],
    Second: [
     { text: 'Three', value: 'C' }
    ]
  }
}

바인드하고 있습니다.label의 탓으로 돌리다option(어레이).원하는 것은 오브젝트 키에 바인드하는 것입니다.

에서 두 번째 파라미터를 지정하면 각 옵션의 키를 얻을 수 있습니다.v-for지시:

<optgroup v-for="(option, key) in options" v-bind:label="key">

---

네 이름도 바꾸고 싶어options의 재산.optionGroups더 이상의 혼란을 피하기 위해:

data: {
  selected: 'A',
  optionGroups: {
    First: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' }
    ],
    Second: [
      { text: 'Three', value: 'C' }
    ]
  }
}

이렇게 하면 템플릿이 보다 알기 쉬워집니다.

<optgroup v-for="(group, name) in optionGroups" :label="name">
  <option v-for="option in group" :value="option.value">
    {{ option.text }}
  </option>
</optgroup>

상기의 회답에 따라서optgroup 태그에 라벨을 추가하여 optgroup 태그를 개선합니다.

<optgroup v-for="(group, name) in optionGroups" :key="name" :label="`${name}`">
                
 <option v-for="option in group" :key="option.value">
   {{ option.text }}
    </option>
 </optgroup>

언급URL : https://stackoverflow.com/questions/43812817/how-to-set-optgroup-select-label-in-vue-js