Vuejs2 在vuejs中选择选项时，如何获取optgroup标签？

我想在选择选项时获取国家组名称。我有几个国家有这样的团体

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

这里有两个步骤

获取所选索引

查找所选选项

为所选选项选择父元素（optgroup）

最后，获取标签（国家组）

---

这是演示文稿

，你可能想考虑把这些国家拉到合适的数据结构，而不是硬编码它们直接进入模板。一旦获得了数据作为数据，就不需要从DOM中提取数据。

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

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);
}