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

Question

我有一个Vue应用程序，它是一个复杂的表单，根据您做出的选择，其中包含许多开关规则。我通过在各部分中创建组件来完成此操作。在启用“提交”按钮（在上一节中）之前，我要检查是否可以填写的所有内容都已启用。我有一个在填充元素后会更新的类。需要填充的类将一直存在，直到将某些数据放入字段或组件中为止

<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>

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

Answer 1

我认为你可以通过不同的方式实现解决方案。我看到data()中有loadFormDate和StaffID变量。因此，您可以检查这两个变量是否为空或不在计算属性中，而不是检查类名，然后您可以禁用或启用按钮。

data() {
  return {
    loadFormDate: '',
    staffID: '',
...

computed: {
   isNotFilled() {
     this.loadFormDate !== '' && this.staffID !== '' ? return false : return true           
   }

...

<template>
  <button :disabled="isNotFilled">