如何使用 Vuetify 3 动态更改元素提示？

Question

这是我的 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>

这是component.ts

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

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

我想更改按钮点击时的提示，例如 This is a new hint。谁能说一下如何在 Vuetify 3 中使用 Composition API?

Answer 1

只需在设置挂钩中创建一个名为 hint 的引用属性，然后将其绑定到 hint 属性，并在单击按钮时更新它：

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

在模板中：


<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>

如何使用 Vuetify 3 动态更改元素提示？

How to change element hint dynamically with Vuetify 3?

javascript

typescript

vue.js

vuetify.js

vuejs3