vue watch 数据监听

Question

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

需求是这样的,在vue页面中有这样一个响应式对象,还有一个下一步的按钮,下一步的按钮默认是禁用状态,因为该对象中每个数据的值都是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;

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在 Vue 中，watch 可以用于监听响应式对象或其属性的变化。针对你的问题，你希望当 pickerValue 中的 tem、building 和 date 这三个字段都有值时，能够启用“下一步”按钮。这里有一个方法可以解决你的问题，同时保持响应性。

首先，你可以使用 watch 来监听 pickerValue 对象本身，而不是直接监听 pickerValue.value.date。这样，当 pickerValue 中的任何属性发生变化时，watch 都会触发。然后，你可以在 watch 的回调函数中检查 tem、building 和 date 是否都有值。

下面是如何实现的示例代码：

import { ref, watch } from "vue";

const pickerValue = ref({
  tem: "",
  building: "",
  date: ""
});

const disabledNext = ref(true); // 初始状态为禁用

// 监听 pickerValue 对象的变化
watch(pickerValue, (newValue, oldValue) => {
  // 检查 tem, building, date 是否都有值
  const allValuesFilled = newValue.tem !== "" && newValue.building !== "" && newValue.date !== "";
  disabledNext.value = !allValuesFilled; // 如果所有字段都有值，则禁用状态设为 false
});

// 导出 disabledNext 以便在组件中使用
export default disabledNext;

在这个示例中，我们使用 watch 来监听 pickerValue 对象。每当 pickerValue 发生变化时，回调函数就会被调用。在回调函数中，我们检查 tem、building 和 date 是否都已经被赋予了值。如果所有字段都有值，我们将 disabledNext 设置为 false，表示“下一步”按钮应该被启用。

请注意，这里使用了 newValue 和 oldValue 参数，它们分别代表 watch 触发时的新值和旧值。在这个例子中，我们只使用了 newValue，但你可以根据需要使用 oldValue 来进行更复杂的逻辑判断。

希望这个解决方案能帮助你解决问题。如果你需要更多的帮助或者有其他问题，随时欢迎提问。