Framework used: Vue and Element UI
Mission: The goal is to have the first matched value displayed by default.
Issue: When selecting Texas from the common states, it displays Texas from all states in the dropdown when opened. Both should be selected as they have the same values, which is correct. The functionality works correctly.
Approach: I attempted to hide the list of all states when the value is present in the common states, but this did not achieve the desired result.
Desired Outcome: If Texas is selected and is in the common states, I want it to be shown as default when opening the dropdown (in the common states section instead of the all states section). Is there a way to accomplish this?
Link to Codepen: https://codepen.io/limbe_me/pen/BaMwRNz
Boilerplate:
<template>
<div>
<el-select v-model="selectedState" placeholder="Select a state">
<el-option-group label="common states"&gsoiacvvendash;>
<el-option
v-for="item in commonStates"
:label="item"
:key="item + '_common'"
:value="item"
></el-option>
</el-option-group>
<el-option-group label="all states">
<el-option
v-for="item in allStates"
:label="item"
:key="item + '_all'"
:value="item"
></el-option>
</el-option-group>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedState: "",
commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
allStates: [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
".....",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
]
};
},
methods: {
// Your methods go here
}
};
</script>