vue.js - 如何在 Vue 中创建一个响应式函数以检查对象属性是否都有值并启用按钮？

Question

问题遇到的现象和发生背景

需求是这样的,在页面中有一个表单,表单里多个输入绑定了多个值,
下一步的按钮默认是禁用状态,因为该对象中每个数据的值都是false,而启用的条件就是三个值都有值的情况下才会启用

  const pickerValue = ref<{
    [key: string]: string;
  }>({
    tem: "",
    building: "",
    date: ""
  });

所有需要这么一个函数来监听传入值的变化,但是这样传值找到具体的 pickerValue.value.date 会丢失响应性

  const disabledNext = useCheckEmptyValues([pickerValue.value.tem, pickerValue.value.building, pickerValue.value.date]);

所有这个方法应该怎么编写呢.

不能创建多个变量记录状态,
useCheckEmptyValues 方法负责传入值的空值判断,如果全传入的值中但凡有一个值为非正常值状态,则返回false,否则返回true
返回的状态要用于按钮的disabled状态,所以返回的状态需要是一个响应式变量

useCheckEmptyValues 方法必须是个通用方法,因为页面中不一定会传入哪些值,多少值,所以要有很高的适应性

import { ref, watch } from "vue";

function useCheckEmptyValues(values) {
  const allValuesFilled = ref(false);


  return allValuesFilled;
}

export default useCheckEmptyValues;

这是我之前写的,不大行

function useWatch(values) {
  const hasEmptyValue = ref(false);

  const checkValues = () => {
    hasEmptyValue.value = values.some((value) => {
      if (value === null || value === undefined || value === "") {
        return true;
      }
      if (Array.isArray(value)) {
        return value.length === 0;
      }
      if (typeof value === "object") {
        return Object.keys(value).length === 0;
      }
      return false;
    });
  };

  // Watch each value in the values array
  values.forEach((value) => {
    watch(value, checkValues, { immediate: true, deep: true });
  });

  return computed(() => {
    console.log("1");
    return hasEmptyValue.value;
  });
}

export default useWatch;

Answer 1

const picker = ref<{
    [key: string]: string
  }>({
    tem: '',
    building: '',
    date: '',
  }),
  flag = computed(() =>
    Object.entries(picker.value).some(
      ([, v]) =>
        v === null ||
        v === undefined ||
        v === '' ||
        (Array.isArray(v) && v.length === 0) ||
        (typeof v === 'object' && Object.keys(v).length === 0)
    )
  )