Vuetify - 清除 v-text-field 时如何触发方法

Posted 2023-02-22

【中文标题】Vuetify - 清除 v-text-field 时如何触发方法

【英文标题】：Vuetify - How to trigger method when clear a v-text-field

【发布时间】：2019-03-05 13:13:34

【问题描述】：

有没有办法在使用 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

谢谢

弗朗西斯

【参考方案1】：

您可以使用@click:clear="()"，这样您就可以在调用该函数的同时清除您的文本。

这是一个例子

https://codepen.io/anon/pen/ePmLOg?editors=1010

【参考方案2】：

使用clear-icon-cb 属性。这允许您在单击清除图标时使用自定义回调函数。

<v-text-field
  clearable
  :clear-icon-cb="onClearClicked">
</v-text-field>

onClearClicked () 
  // do something

【讨论】：

:clear-icon-cb 现已折旧。现在使用@click:clear

【参考方案3】：

您可以使用 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() 而不是 clearableCallback()

【参考方案4】：

就我而言，@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);
  

【参考方案5】：

如果您希望清除按钮将模型值更新为特定的值，您也可以覆盖清除图标：

<v-text-field
  v-model="myValue"
  append-icon="mdi-close"
  @clear:append="myValue = 1">
</v-text-field>

【参考方案6】：

调用输入字段的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()