我有一个名为ExamEditor的复杂vue组件，它本身由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. -->
这是完整的组件。
我一直在处理将数据验证引入该组件的任务，以确保只有一致的"；"考试"；可以保存。
由于正在进行一些复杂的验证，我决定推出自己的函数。我的想法是有一个这样的对象：
{
globalErrors: [],
questionErrors: {
id: [errMsg, ...],
...
},
exerciseErrors: { ... },
questionCategoryErrors: { ... },
exerciseCategoryErrors: { ... }
}
也就是说，编辑器中每类项的一个对象和给定项的错误都由其id作为对象中的一个属性进行键控。然后，我会将每个错误数组(或undefined(作为道具传递给子组件编辑器以显示消息。
然后，我制作了一个函数，用适当的错误字符串填充对象。这就是函数的样子。
我把这个函数放在一个计算属性中，使它始终与数据同步，但问题来了：它总是显示错误。
例如，当我在编辑器中添加新问题时，会弹出错误，告诉我没有选择类别，问题文本为空，等等
我想做的是有一种在适当的时候显示错误的方法。我认为一个好的起点是在单击某个子组件时运行该函数。例如，我可能会添加一个问题，忘记为其选择一个类别(这是必需的(，当我单击"；添加问题"；要继续，函数将运行并显示错误。
我怎样才能做到这一点？
此外(这可能是基于意见的，但我正在寻找一些输入(：这是显示错误的最合适的方式吗？您希望如何以及何时在表单中显示错误？请记住，我的组件中有很多选项，界面非常复杂，边缘杂乱，所以我想保持简单。
您可以向每个编辑器组件添加一个标志，用于跟踪是否输入了任何输入，并且仅在标志为true时显示错误。
在CategoryEditor.vue中，向数据道具添加showErrors标志：
export default {
data() {
return {
showErrors: false,
}
}
}
在update()方法中，将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>何时失去焦点，请使用带有v-on:blur指令(或其@blur简写(的blur事件侦听器：
<input @blur="showErrors = true">