返回

Vuelidate 2：如何修复计算列表中 $model 不更新的问题？

vue.js

Vuelidate 2：在处理计算列表时理解 $model 不更新的原因

导言

在 Vue 3 中，使用 Vuelidate 2 进行表单验证时，您可能会遇到这种情况，即当使用计算列表时，$model 不会相应更新。本文将深入探讨这个问题，解释其原因并提供一个有效的解决方案。

问题

考虑以下场景：您有一个来自后端的元素集合，这些元素包含日期或不包含日期。您希望将有日期的元素显示在屏幕的一侧，而没有日期的元素显示在另一侧。

为此，您创建了一个计算列表来根据日期对元素进行分组，并将其存储在 timed_slots 和 dated_slots 属性中。但是，当您尝试向列表中添加新项目或更新现有项目时，Vuelidate 无法正确跟踪这些更改。

原因分析

这个问题的根源在于 Vuelidate 如何处理响应式数据。$model 是 Vuelidate 用于跟踪模型状态的对象。它是响应式对象，这意味着当模型数据更改时它会自动更新。

但是，在给定的情况下，您使用计算列表对数据进行分组。计算列表是一个新的响应式对象，它基于其他响应式数据创建。这意味着当分组数据发生更改时，计算列表也会发生更改，但 Vuelidate 无法自动检测到这一点。

解决方案

要解决此问题，您可以在分组数据更改时手动更新 $model。这可以通过在计算列表的 getter 函数中使用 watch 函数来实现。

const groupedData = computed(() => {
  const grouped = Object.groupBy(
    props.value.map((item, index) => ({ ...item, index })),
    ({ date }) => (date ? 'dated_slots' : 'timed_slots'),
  );

  watch(grouped, () => {
    v.$model = grouped;
  });

  return grouped;
});

通过使用 watch 函数，您可以确保当分组数据更改时，$model 相应更新。这样，Vuelidate 就能够正确跟踪模型状态，验证将按预期工作。

结论

手动更新 $model 可以解决当使用 Vuelidate 2 处理计算列表时 $model 不更新的问题。通过理解问题的原因并实施提供的解决方案，您可以确保 Vuelidate 能够正确跟踪模型状态，从而确保表单验证的准确性和可靠性。

常见问题解答

1. 为什么 Vuelidate 无法自动检测到计算列表中的更改？

Vuelidate 无法自动检测到计算列表中的更改，因为它基于响应式对象的工作方式。当计算列表更新时，它创建一个新的响应式对象，Vuelidate 不会自动意识到这一点。

2. 为什么使用 watch 函数可以解决问题？

watch 函数允许您在响应式对象发生更改时执行回调函数。在计算列表的情况下，您可以使用 watch 函数来检测分组数据中的更改，并相应更新 $model。

3. 还有其他方法可以解决这个问题吗？

虽然使用 watch 函数是最直接的方法，但还有其他方法可以解决这个问题，例如使用自定义验证规则或通过在计算列表中设置额外的响应式属性来强制 Vuelidate 重新验证。

4. 使用手动更新 $model 会影响性能吗？

在大多数情况下，手动更新 $model 对性能的影响很小。但是，如果您在大型数据集上频繁进行更改，则可能需要考虑使用其他方法，例如自定义验证规则或强制重新验证。

5. 此解决方案是否适用于 Vuelidate 1？

否，此解决方案适用于 Vuelidate 2。Vuelidate 1 使用不同的 API，因此需要不同的方法来解决此问题。