Vuetify3 text-field clearable - how to make it work with composition API-CodePudding

The Vuetify3 text field component offers a clearable prop to clear it easily. The help page shows the usage with the options API. But how do I get it working with the composition API?

CodePudding user response：

you don't need to do anything extra for it to work. You should pass a ref for the model to replace the one that is being defined on data()

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

const msg = ref('Hello')
</script>

<template>
<v-app>
    <v-col>
      <v-text-field
        v-model="msg"
        clearable
        hide-details="auto"
        label="Message"
      ></v-text-field>
    </v-col>
  </v-app>
</template>

I left you an example here:

https://play.vuetifyjs.com/#eNp9UMtuwjAQ/BXLF1qJxFUfFxQQvfXSL8AcTLIBF79kO2krlH/vOgkiBbU5ZWbWs7OzOdFX5/K2AbqgRSi9dJEEiI1bcSO1sz6SE/FQk47U3moyw9EZN9yU1oRIdNiTZdLvZm glJ3dc1OwwQcdEETQTokIiIo2Ey4ZE/wQlFaNoIcRvmJWS1DVmSSkzbStQC05xU2cXoRSgfBip BCHWQFWQVRSBXwgWiinb5QYtcbvUMIYg8XaVWw6fJzPiTPAdP/kLxgk3vonA4VZVq4/CNYgyWe0gM CoHTBemZxGF1CXN6iNGFBWONccd9XlrN1qgx35goNd5g9fopf8yfX1glQ5zyOQSd7bz9DOBxI6fziXmU9fdfC0YZfR/y0XakkuWNFUP/FnzmwVTgwf b 2r2V/Yr7SZ/2tlx02GXSppjuKqxDH2Fm20a6eZ0sMbh/g66/QFfZOVh