时间戳

首页 > 解决方案 > 如何检查多个元素是否存在 Vue 中的一个类？

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

问题描述

我有一个 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>

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

标签： vuejs2

解决方案

我假设您'need-to-fill'已经正确设置了所需的课程。
创建disabled确定按钮是否被禁用的变量： 

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

并在按钮上设置指示器，并在表单元素上引用ref="form"： 

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

注意：它不必是form，它可以是div或其他，只要它包含您所有的表单输入。

创建检查表单元素的任何后代是否包含所需类的函数： 

const descendantContainsClass = (el, className) => {
  let elements = Array.from(el.getElementsByTagName('*'))
  let hasClass = false
  for(let el of elements) {
    if(el.classList.contains(className)) {
      hasClass = true
      break;
    }
  }
  return hasClass
}

取决于您如何存储表单数据（即您的输入 v-model 值）创建一个观察者（或多个观察者）并在每次数据更改时调用该函数： 

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')
      })
    }
  }
},

根据您的表单，您可能不需要观察者，而只需在handler例如change或input事件之后调用函数（与 in 中的相同）。

推荐阅读