How to change element hint dynamically with Vuetify 3?

January 26, 2022

This is my component.vue:

<template>
  <v-text-field
      name="Foo"
      :label="$t('foo')"
      type="text"
      hint="This is a hint"
      persistent-hint
  ></v-text-field>
  <v-btn color="primary" @click="onButtonClick()">Press</v-btn>
 </template>

And this is component.ts

import { defineComponent, reactive, ref, Ref} from 'vue';
export default defineComponent({

  setup() {
     
    function onButtonClick() {
      
    }    
    return { onButtonClick }
  }
});

I want to change hint on button click, for example to This is a new hint. Could anyone say how to do in Vuetify 3 using Composition API?

>Solution :

Just create a ref property called hint inside the setup hook then bind it to the hint prop and update it when you click on the button:

import { defineComponent, reactive, ref, Ref} from 'vue';
export default defineComponent({

  setup() {
     const hint=ref('This is a hint')

    function onButtonClick() {
      hint.value="new hint"
    }    
    return { onButtonClick, hint }
  }
});

in template :


<template>
  <v-text-field
      name="Foo"
      :label="$t('foo')"
      type="text"
      :hint="hint"
      persistent-hint
  ></v-text-field>
  <v-btn color="primary" @click="onButtonClick()">Press</v-btn>
 </template>