如何重置 a-select Ant Design Vue？

Question

当我在函数中执行事件时，我正在尝试重置 a-select 的框。

基本上我有我的-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 select 值，handleSecondChange 将重置第一个 select 值。

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

如何重置 a-select Ant Design Vue？

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

javascript

vue.js

antd