How can I Reset an a-select Ant Design Vue?

Question

I'm trying to reset the box of my a-select when i'm doing an event in a function.

Basically i have my a-select

<a-select
  style="marginTop: 8px;width: 20%"
  @change="onChanged"
>
  <a-select-option
    v-for="test in tests"
    v-bind:key="test.id"
    :value="test.id"
  >
    {{ test.testName }}
  </a-select-option>
</a-select>

And i want to reset with a particular event and show nothing like this

How can i do that in this case?

Answer 1

You can use v-model to handle the a-select value and reset the value in other particular event . Just like below, handleFirstChange will reset the second select value and handleSecondChange will reset the first select value.

<template>
  <div>
    First: <a-select v-model:value="first" style="width: 100%" @change="handleFirstChange">
      <a-select-option v-for="i in 10" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
    Second: <a-select v-model:value="second" style="width: 100%" @change="handleSecondChange">
      <a-select-option v-for="i in 10" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
    export default {
  data() {
    return {
      first: [],
      second: []
    };
  },
  methods: {
    handleFirstChange(value) {
      this.second = []
    },
    handleSecondChange(value) {
      this.first = []
    },
  },
};
</script>

Check out this demo link