Vue.js - 当用户点击远离组件时显示表单错误

Question

我有一个复杂的vue组件叫ExamEditor，它本身是由QuestionEditor、ExerciseEditor等子组件组成的。它与一个 exam 对象相关联，该对象包含带有 questions 等的嵌套数组。这是考试编辑器内的布局草图：

 <QuestionEditor
    v-for="(question, index) in exam.questions"
    :id="'q-' + question.id"
    :key="'q-' + question.id"
    v-model="exam.questions[index]"
    :category-choices="exam.questionCategories"
    :errors="editorErrors.questionErrors[question.id]"
></QuestionEditor>
<!-- editors for exercises, etc. -->

Here's 完整组件。

我一直在处理将数据验证引入此组件的任务，以确保只能保存一致的“考试”。

由于正在进行一些复杂的验证，我决定推出自己的功能。我的想法是有一个像这样的对象：

   {
        globalErrors: [],
        questionErrors: {
            id:    [errMsg, ...],
            ...
        },
        exerciseErrors: { ... },
        questionCategoryErrors: { ... },
        exerciseCategoryErrors: { ... }
    }

也就是说，编辑器中每个项目类别的对象和给定项目的错误都由其 id 作为对象中的属性进行键入。然后我会将每个错误数组（或undefined）作为道具传递给子组件编辑器以显示消息。

然后我创建了一个用适当的错误字符串填充对象的函数。 This 是函数的样子。

我将此函数放在一个计算属性中，使其始终与数据同步，但问题来了：它总是显示错误。

例如，当我在编辑器中添加新问题时，会弹出错误提示我没有选择类别、问题文本为空等。

我想做的是有办法在适当的时候显示错误。我认为一个好的起点是在单击子组件时运行该函数。例如，我可能会添加一个问题，忘记为其选择一个类别（这是必需的），当我单击“添加问题”继续前进时，该函数会运行并显示错误。

我怎样才能做到这一点？

另外（这可能是基于意见的，但我正在寻找一些输入）：这甚至是显示错误的最合适的方式吗？您希望如何以及何时在表单中显示错误？请记住，我的组件中有很多选项，界面非常复杂且边缘杂乱，所以我想保持简单。

Answer 1

您可以在每个编辑器组件中添加一个标志来跟踪是否输入了任何输入，并且仅在标志为 true 时显示错误。

在CategoryEditor.vue 中，将showErrors 标志添加到data props：

export default {
  data() {
    return {
      showErrors: false,
    }
  }
}

在update() method 中，将showErrors 设置为true。

export default {
  methods: {
    update() {
      this.showErrors = true
    }
  }
}

在template 中，将showErrors 添加到v-if="errors"。

<ul v-if="showErrors && errors" class="px-4 mt-2 pt-2 flex space-x-4">
  <!-- show errors -->
</ul>

在QuestionEditor.vue 和ExerciseEditor.vue 中做同样的事情。

要检测组件的 <input>s 何时失去焦点，请使用 blur-event 侦听器和 v-on:blur directive（或其 @blur 简写）：

<input @blur="showErrors = true">