Vuejs2 如何检查Vue中是否存在类的多个元素？

我有一个Vue应用程序，它是一个复杂的表单，根据所做的选择有很多开关规则。 我通过在节中创建组件来实现这一点。 在启用submit按钮（在最后一节中）之前，我想检查可以填写的所有内容是否都已完成。 我有一个类，当一个元素被填充时，我会更新它。在某些数据被放入字段或组件之前，是否需要填充类

<template>
  <div>
  <div>
        <label class="block">
          <span :class="[Boolean(loadFormDate) ? 'bg-blue-lighter': 'need-to-fill']"><strong>Date:</strong></span>
          <datepicker
            placeholder="Select Date"
            @selected="commitDate('formDate', $event)"
            :value="loadFormDate" />
        </label>
      </div>
      <div class="flex-1">
        <label class="block">
          <span  :class="[Boolean(staffID) ? 'bg-blue-lighter': 'need-to-fill','w-full']"><strong>Staff ID:</strong></span>
          <input class="block" placeholder="Staff ID"
                 @input="commitField('staffID', $event.target.value)"
                 :value="staffID"
          />
        </label>
      </div>
  </div>
</template>

日期：
员工ID:

---

我想搜索所有元素，以查看任何元素中都不存在“需要填写”，如果不存在，请启用“提交”按钮。

我认为您可以用不同的方式实现解决方案。我看到数据（）中有loadFormDate和staffID变量。因此，不必检查类名，您可以检查这两个变量是否为空或不在计算属性中，然后可以禁用或启用按钮

data（）{
返回{
loadFormDate:“”，
斯塔夫：“，
...
计算：{
isNotFilled（）{
this.loadFormDate！=''&&this.staffID！=''？返回false：返回true
}
...

我假定您已经正确设置了所需的类

“需要填充”

。
创建

disabled

变量，用于确定按钮是否被禁用：

data: () => ({
  disabled: true,
}),

并在按钮上设置指示器，并在表单元素上引用

ref=“form”

：

<form ref="form">
  // ...
  <button :disabled="disabled">Submit</button>
</form>

取决于存储表单数据的方式（即输入的v模型值），创建一个或多个观察程序，并在每次数据更改时调用函数：

watch: {
    form: {
      deep: true,
      handler(v) {
        this.$nextTick(() => {
          // we pass form element, and desired class to check against
          this.disabled = descendantContainsClass(this.$refs.form.$el, 'need-to-fill')
      })
    }
  }
},

---

根据您的表单，您可能不需要watcher，只需调用函数即可（与

处理程序中的操作相同）例如，在
change
或
input
事件之后。
如果这是唯一的模板，这将很好。但是有6个模板和比示例中更多的输入。我需要能够从顶部组件向下钻取，以查看所有其他包含的组件。如果您正在处理大型表单，我认为您需要使用第三方软件包，如v-validate，可能会减少表单验证的代码行。但我不认为通过查看类名来查找空输入是一个好主意。我建议您检查库。如果输入无效或为空，使用此库不会让您按“发送”按钮。请欣赏您的想法，但这不是“正常”形式。验证规则会根据选择进行更改。虽然我可以使用验证包，也可以在状态源中构建验证规则（我使用的是vuex），但我希望按照问题中提出的方式进行。
watch: {
    form: {
      deep: true,
      handler(v) {
        this.$nextTick(() => {
          // we pass form element, and desired class to check against
          this.disabled = descendantContainsClass(this.$refs.form.$el, 'need-to-fill')
      })
    }
  }
},