vuejs에서 옵션을 선택할 때 옵션 그룹 레이블을 얻는 방법은?

vuejs에서 옵션을 선택할 때 옵션 그룹 레이블을 얻는 방법은?

옵션을 선택할 때 국가 그룹 이름을 얻고 싶다.나는 다음과 같은 여러 그룹을 가진 나라들을 가지고 있다.

<template>
    <select id="countries" v-model="country" @change="getCountryGroup($event)">
        <optgroup label="Asia">
            <option value="AF">Afghanistan</option>
            <option value="AM">Armenia</option>
            <option value="AZ">Azerbaijan</option>
            ...
            <option value="BD">Bangaldesh</option>
            ...
        </optgroup>
        <optgroup label="Australia / Oceania">
            <option value="AS">American Samoa</option>
            <option value="AU">Australia</option>
            <option value="CK">Cook Islands</option>
        </optgroup>
        <optgroup label="Africa">
            <option value="DZ">Algeria</option>
            <option value="AM">Angola</option>
            <option value="AZ">Azerbaijan</option>
        </optgroup>
        <optgroup label="South America">
            <option value="AR">Argentina</option>
            <option value="BO">Bolivia</option>
            <option value="BR">Brazil</option>
        </optgroup>
        <optgroup label="North America">
            <option value="US">United States</option>
            <option value="UM">United States Minor Outlying Islands</option>
            <option value="CA">Canada</option>
        </optgroup>
        <optgroup label="Europe">
            <option value="UK">United Kingdom</option>
            <option value="AL">Albania</option>
            <option value="AD">Andorra</option>
        </optgroup>
    </select>
</template>

선택 시 가정Bangladesh그러면 나는 옵트 그룹 이름을 알고 싶다.Asia여기 나의 vueJs 방법이 있다.

getCountryGroup: function(event){
    console.log( event.target.getAttribute('label') );
}

여기 두 가지 단계가 있다.

1. 선택한 인덱스 가져오기
2. 선택한 옵션 찾기
3. 선택한 옵션에 대한 상위 요소(옵션 그룹) 선택
4. 마지막으로 라벨을 받는다(국가 그룹)

getCountryGroup: function(event){

    // 1. Get the selected index
    const index = event.target.selectedIndex;

    // 2. Find the selected option
    const option = event.target.options[index];

    // 3. Select the parent element (optgroup) for the selected option
    const optgroup = option.parentElement;

    // 4. Finally, get the label (Country group)
    const countryGroup = optgroup.getAttribute('label');

    console.log(countryGroup);
}

여기 데모 https://codepen.io/maab16/pen/KKKpJba 입니다.

참조URL: https://stackoverflow.com/questions/58311197/how-can-i-get-optgroup-label-when-select-an-option-in-vuejs