使用Vue组合式API实现Vuetify表单提交按钮状态切换的问题

问题根源：你用var valid = false声明的是普通变量，Vue 3组合式API无法追踪它的变化，导致v-form的验证状态更新无法同步到变量，按钮自然一直处于禁用状态。

正确做法是用ref声明响应式变量，让Vue能监听状态变化：

<script setup>
import { ref } from 'vue'
// 声明响应式的验证状态变量
const valid = ref(false)
const required = [(v) => !!v || '必填项']
</script>

<template>
  <!-- v-model绑定响应式的valid -->
  <v-form v-model="valid" validate-on="input">
    <v-text-field 
      label="输入内容" 
      :rules="required"
    ></v-text-field>
    <v-btn :disabled="!valid" type="submit">提交</v-btn>
  </v-form>
</template>

关键说明： #

• 必须用ref（或reactive）声明valid，确保它是响应式的，这样v-form的验证状态变化才能实时同步到变量。
• validate-on="input"配置会在用户输入时实时触发验证，也可以根据需求设为['input', 'blur']（输入+失焦时验证），默认值是submit（仅提交时验证），这也是之前你设置后没生效的原因之一——默认只在提交时验证，输入过程中不会更新状态。
• 如果需要手动触发全表单验证，可以给v-form加ref，调用实例的validate()方法：

  <script setup>
  import { ref } from 'vue'
  const valid = ref(false)
  const formRef = ref(null)
  const required = [(v) => !!v || '必填项']
  
  const handleSubmit = () => {
    const isFormValid = formRef.value.validate()
    if (isFormValid) {
      // 提交逻辑
    }
  }
  </script>
  
  <template>
    <v-form ref="formRef" v-model="valid">
      <v-text-field label="输入内容" :rules="required"></v-text-field>
      <v-btn @click="handleSubmit" :disabled="!valid">提交</v-btn>
    </v-form>
  </template>
  

内容的提问来源于stack exchange，提问作者Ada Song