Vuetify3 text-field clearable属性如何结合Composition API使用

其实clearable属性本身不需要额外适配Composition API，直接配合响应式变量和v-model就能正常生效，下面是具体的用法示例：

基础用法 #

只需要给v-text-field添加clearable属性，再用v-model绑定一个响应式变量即可，点击清空图标会自动把变量重置为空：

<template>
  <v-text-field
    v-model="inputValue"
    label="可清空输入框"
    clearable
  ></v-text-field>
</template>

<script setup>
import { ref } from 'vue'

// 创建响应式变量绑定输入框值
const inputValue = ref('')
</script>

自定义清空逻辑 #

如果需要在清空输入框时触发额外操作，可以使用Vuetify提供的@click:clear事件，直接绑定Composition API中定义的方法：

<template>
  <v-text-field
    v-model="inputValue"
    label="带清空回调的输入框"
    clearable
    @click:clear="handleClear"
  ></v-text-field>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')

const handleClear = () => {
  console.log('输入框已清空')
  // 在这里添加你的自定义逻辑，比如重置其他状态、发起数据请求等
}
</script>

简单来说，clearable是组件的内置属性，不管用Options API还是Composition API，核心都是通过v-model绑定响应式状态；自定义行为则通过事件绑定实现，和Options API的逻辑一致，只是脚本部分采用Composition API的写法即可。

内容的提问来源于stack exchange，提问作者Fred