Vuetify：如何以编程方式触发v-text-field动画

完全可以无需聚焦字段，通过以下几种方式编程触发v-text-field的标签上移、字段变色动画：

v-text-field的标签动画本质是由组件内部的hasValue（值存在时）和isActive（激活状态时）两个状态控制的，只要操控这两个状态，就能触发对应的动画效果。

方法1：绑定值自动触发（推荐） #

v-text-field会自动检测model-value是否有内容，当值不为空时，会自动激活hasValue状态，触发标签动画。对于多选组件，你可以把选中的选项拼接成字符串（或其他非空值）绑定到model-value上，组件会自动处理动画：

<template>
  <!-- 多选对应的文本输入框 -->
  <v-text-field 
    label="已选选项" 
    :model-value="selectedItems.join('、')"
    readonly
  />

  <!-- 自定义嵌套结构多选面板 -->
  <div v-for="group in nestedData" :key="group.id">
    <h4>{{ group.name }}</h4>
    <div v-for="item in group.items" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.label" 
        v-model="selectedItems"
      />
      {{ item.label }}
    </div>
  </div>
</template>

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

// 模拟嵌套数据集
const nestedData = ref([
  {
    id: 1,
    name: "分组1",
    items: [{ id: 11, label: "选项1-1" }, { id: 12, label: "选项1-2" }]
  },
  {
    id: 2,
    name: "分组2",
    items: [{ id: 21, label: "选项2-1" }, { id: 22, label: "选项2-2" }]
  }
])

// 选中项数组
const selectedItems = ref(["选项1-1"]) // 默认选中项，初始化时自动触发动画
</script>

方法2：直接操控组件实例状态 #

通过Vue的ref获取v-text-field实例，手动设置hasValue或isActive为true，强制触发动画：

<template>
  <v-text-field ref="multiField" label="多选选项" />
  <button @click="triggerAnimation">触发动画</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const multiField = ref(null)

const triggerAnimation = () => {
  if (!multiField.value) return
  // 方式1：标记为已有值（适合多选已有选中项的场景）
  multiField.value.hasValue = true
  // 方式2：标记为激活状态（效果和聚焦一致）
  // multiField.value.isActive = true
}

// 初始化时触发（比如已有默认选中项）
onMounted(() => {
  triggerAnimation()
})
</script>

方法3：手动操作CSS类 #

v-text-field的动画对应两个核心CSS类：v-input--has-value（值存在时的样式）和v-input--is-active（激活状态样式）。可以直接获取组件DOM元素，手动添加这些类来触发动画：

<template>
  <v-text-field ref="multiField" label="多选选项" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const multiField = ref(null)

const triggerAnimation = () => {
  const fieldEl = multiField.value?.$el
  if (!fieldEl) return
  fieldEl.classList.add('v-input--has-value', 'v-input--is-active')
}

onMounted(() => {
  triggerAnimation()
})
</script>

注意事项 #

• 优先使用方法1，符合Vue响应式逻辑，避免手动操作DOM或组件状态带来的不一致问题。
• 如果组件设置了readonly或disabled，依然可以正常触发动画，不影响多选功能。
• 若需要取消动画，只需将hasValue/isActive设为false，或移除对应的CSS类即可。

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