Quasar框架q-checkbox自定义验证问题：错误提示无响应

你的问题核心是仅在提交时设置了错误提示显示，却未在复选框状态变化时同步更新错误状态。以下是两种简洁可行的解决方案：

方案一：使用计算属性（推荐） #

用计算属性直接关联两个复选框的状态，自动控制错误提示的显示/隐藏，无需手动维护状态：

修改后的TypeScript代码 #

const acceptedPrice = ref<boolean>(false);
const acceptedAgreement = ref<boolean>(false);
// 用计算属性替代手动控制showError
const showError = computed(() => {
  // 只要有一个复选框未勾选，就显示错误
  return !acceptedPrice.value || !acceptedAgreement.value;
});

async function onsubmit() {
  // 复选框未通过验证直接返回
  if (showError.value) return;
  
  const success = await buildingBoomForm.value?.validate();
  if (success === true) {
    Notify.create({
      color: 'positive',
      icon: 'cloud_done',
      message: 'Formular erfolgreich versendet!'
    });
  }
}

组件部分无需修改，v-if="showError"会自动响应计算属性的变化，勾选复选框后错误提示会立即消失。

方案二：使用监听器（Watchers） #

如果需要手动控制showError，可以给两个复选框的状态添加监听器，实时同步错误状态：

修改后的TypeScript代码 #

const acceptedPrice = ref<boolean>(false);
const acceptedAgreement = ref<boolean>(false);
const showError = ref<boolean>(false);

// 监听两个复选框的状态变化
watch([acceptedPrice, acceptedAgreement], ([newPriceState, newAgreeState]) => {
  // 更新错误状态：只要有一个未勾选就显示错误
  showError.value = !newPriceState || !newAgreeState;
}, { immediate: true }); // 立即执行一次，初始化页面时就正确显示状态

async function onsubmit() {
  if (showError.value) return;
  
  const success = await buildingBoomForm.value?.validate();
  if (success === true) {
    Notify.create({
      color: 'positive',
      icon: 'cloud_done',
      message: 'Formular erfolgreich versendet!'
    });
  }
}

原代码不生效的原因 #

你之前的逻辑仅在点击提交按钮时，当两个复选框都未勾选才将showError设为true，但勾选复选框时没有任何代码去更新showError的值，导致它一直保持true，错误提示自然不会消失。

内容的提问来源于stack exchange，提问作者WrapperDiv