使用 Composition API 在 Vuetify 中切换表单提交

Question

Vuetify 的文档指出“[v-form] 的当前验证状态是使用 v-model 或提交事件访问的”。尝试使用它来切换提交按钮会锁定提交按钮，无论表单是否有效；下面给出了一个玩具示例。

<script setup>
var valid = false
const required = [(v) => !!v || 'Required.']
</script>

<template>
  <v-form v-model="valid">
    <v-text-field :rules="required"></v-text-field>
    <v-btn :disabled="!valid"></v-btn>
  </v-form>
</template>

填充文本字段后，

validate-on

的组合不会导致按钮正确重新启用。

如果切换提交按钮的直观方法不起作用，那么使用 Composition API 实现此效果的正确方法是什么？我见过的所有实现此目的的示例都使用 Vue 2 或 Options API。

Answer 1

你的 v-model 变量不是反应性的

var valid = false

您需要使用

ref

。查看 Vue 文档中的反应性基础知识。另外，

var

已经非常过时了。使用

const

或

let

，对于参考，您应该始终使用

const

，因为它只是不断更新的内部值。

import { ref } from 'vue'

const valid = ref(false)