[Vuejs]-Vuetify3 text-field clearable – how to make it work with composition API

by

1👍

✅

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

👤xyos

Leave a comment