Make first matched value in the dropdown as default in vue(element ui)?

Question

Framework used: Vue and Element UI

Mission: To display the first matched value as default.

Problem: If Texas is selected from the common states, it shows Texas from the all states section when opening the dropdown(both should be selected as both have same values which is correct, the working is totally correct).

Approach: I have tried to hide the all states list when the value is present in the common states but it is not the desired outcome.

Desired Outcome: If Texas is selected and is in the common states, I would like to show that as default while opening the dropdown(in the common states section instead of the all states section). Is it possible to do so?

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

Answer 1

You can do it like this

<template>
  <div>
    <el-select v-model="selectedState" placeholder="Select a state" @visible-change="change">
      <el-option-group label="common states">
        <el-option
          v-for="item in commonStates"
          :label="item"
          :key="item + '_common'"
          :value="item"
        ></el-option>
      </el-option-group>
      <el-option-group v-if="enabled" 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 {
      enabled: false,
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  },
  methods: {
    // Your methods go here
    change(isVisible) {
      this.enabled = isVisible
    }
  }
};
</script>

<style>
.app {
  color: black;
}
</style>

Add v-if="enabled" to your allStates option group. Then set it true when dropdown is visible

In ElementUI document, I saw they have visible-change. So you can hook that event up and set enabled to $event

Here the Codepen: https://codepen.io/duckstery/pen/QWYqOQo

---

For your extend request, I've adjusted mine code

  data() {
    return {
      enabled: true,
      selectedState: "",
      commonStates: ["California", "New York", "Florida", "Texas", "Hawaii"],
      allStates: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        ".....",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming"
      ]
    };
  },
  methods: {
    // Your methods go here
    change(isVisible) {
      if (this.commonStates.includes(this.selectedState)) {
        this.enabled = false;
        this.$nextTick(() => (this.enabled = true));
      }
    }
  }

Set default enabled to true

You'll have to check if the selectedState is included in commonStates. If true, set enabled to false and set it to true in the nextTick

Here the Codepen: https://codepen.io/duckstery/pen/wvNrmMm