vue3监听watch、计算属性computed()校验表单是否全部不为空

最新推荐文章于 2025-05-02 21:48:52 发布

原创最新推荐文章于 2025-05-02 21:48:52 发布

· 1.4k 阅读

0 ·

版权

文章标签：

#javascript #前端 #vue.js #vue

文章介绍了Vue中如何使用watch监听数据变化，例如监听表单是否全部非空，并展示了如何设置监听选项。同时提到使用computed进行计算属性的不便之处，即可能会在页面加载时立即触发表单验证。作者认为，对于用户体验而言，antdesignvue提供的逐个字段验证方法可能更优。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、监听watch：

import { watch } from 'vue'

// 监听
watch(
  source, // 必传，要侦听的数据源
  callback // 必传，侦听到变化后要执行的回调函数
  // options // 可选，一些侦听选项
)

参考:添加链接描述

例子：监听表单是否全部非空

let isOkDisabled = ref(true) //默认表单确定按钮不可用


watch(
	() => formData,// 表单绑定的数据
	(val) => {
	// addCardFormRef表单控件中的ref 属性绑定的名字
		addCardFormRef.value.validate()
			.then((values: any) => {
				// console.log('非空验证通过')
				isOkDisabled.value = false // 一些处理操作，根据业务情况来改动
			})
			.catch((error: any) => {
				console.log('表单错误信息：', error)
			})

	},
	{
		immediate: false,// 不立刻监听，即刚进来第一次不监听，第二次变化时才开始监听操作
		deep: true // 深度监听
	}
)

二、计算属性computed()：
用法百度上很多，这就不写了。
例子：

 // 这样有个不好的地方，就是页面一开始就立刻触发了表单校验，导致全部错误提示都出来了
 const isOkDisabled = computed(() => addCardFormRef.value?.validate())

补充：
其实站在用户使用的角度来看，用antdesignvue官网一个一个判断字段是否为空的方法，反而用户体验感更好。