Question

有什么方法可以在用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
}

谢谢

弗朗西斯

Answer 1

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

这是例子

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

Answer 2

使用clear-icon-cb道具。当单击清除图标时，这使您可以使用自定义回调函数。

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

onClearClicked () {
  // do something
}

Answer 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()
       }
    }

   }

Answer 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);
  }
}

Answer 5

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

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

Vuetify-清除v文本字段时如何触发方法

5 个答案: