Как я могу проверить несколько элементов на наличие класса в 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

Я предполагаю, что вы уже правильно установили желаемый класс '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-модели), создаете наблюдателя (илинаблюдатели) и вызывайте функцию каждый раз, когда изменяются данные:

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 событий.

Answer 2

Я думаю, что вы можете достичь решения по-другому.Я вижу, у вас есть loadFormDate и staffID переменных внутри data () .Поэтому вместо проверки имен классов вы можете проверить эти две переменные, если они пустые или нет, в вычисляемом свойстве , после чего вы можете сделать кнопку отключенной или включенной.

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

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

...

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