[英]How can I Reset an a-select Ant Design Vue?
I'm trying to reset the box of my a-select when i'm doing an event in a function.当我在 function 中进行活动时,我正在尝试重置我的 a-select 框。
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?在这种情况下我该怎么做?
You can use v-model
to handle the a-select
value and reset the value
in other particular event
.您可以使用
v-model
来处理a-select
值并在其他particular event
中重置该value
。 Just like below, handleFirstChange
will reset the second
select value and handleSecondChange
will reset the first select 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.