如何重置a-select Ant Design Vue？

Question

当我在一个函数中做一个事件时，我正在试着重置我的a-select框。

基本上我有我的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>

我想用一个特定的事件来重置，并且不显示这样的内容

​

在这种情况下，我如何做到这一点？

Answer 1

您可以使用v-model来处理a-select值并在其他particular event中重置value。如下所示，handleFirstChange将重置second选择值，handleSecondChange将重置第一个选择值。

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

查看此demo链接