有没有办法在使用 Vuetify 清除文本字段时调用方法?
<v-text-field
class="mt-2 mb-0"
clearable
solo
v-model="searchQuery"
append-icon="search"
@click:append-outer="searchCos"
label="Nom de compagnies ou mots-clés">
</v-text-field>
onClear() {
doSomethingHere()
}
使用
clear-icon-cb
道具。这允许您在单击清除图标时使用自定义回调函数。
<v-text-field
clearable
:clear-icon-cb="onClearClicked">
</v-text-field>
onClearClicked () {
// do something
}
您可以使用 clearableCallback
<v-text-field
ref="inputRef"
class="mt-2 mb-0"
clearable
.....
>
</v-text-field>
<v-btn text @click="clearInput">clear</v-btn>
<script>
export default {
......
methods:{
.....
clearInput() {
this.$refs.inputRef.clearableCallback()
}
}
}
调用输入字段的 reset 函数,例如:
<v-text-field ref="inputRef"></v-text-field>
<v-btn @click="clearInput">clear</v-btn>
<script>
export default {
methods:{
clearInput() {
this.$refs.inputRef.reset()
}
}
}
如果您希望清除按钮将模型值更新为特定值,您也可以覆盖清除图标:
<v-text-field
v-model="myValue"
append-icon="mdi-close"
@clear:append="myValue = 1">
</v-text-field>
对于我的情况,@click:clear 不运行。 要在文本输入 和 清除时运行操作,我使用 @input :
<v-text-field v-model="search" @input="sendSearch" clearable hide-details></v-text-field>
在我的方法中:
methods: {
sendSearch(){
this.$emit("send-search",this.search);
}
}