VDS за 300р от нашего партнера SpaceWeb
[1]
14 мая 2019, 17:50

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

Должен быть поиск по всем элементам, чтобы увидеть, что «необходимо заполнить» не существует ни в одном элементе формы на предмет заполненных полей, и только после этого акоивировать кнопку.

Комментарии (1)
jaga 15.05.2019 19:59

Сначала создаешь переменную, определяющую состояние кнопки:

 

 data() {
    return {
       disabled: true,
    }
}

Потом добавляешь это в кнопку соответственно, и ставишь ref для формы:

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

Ну и далее, пишем функцию, которая обходит элементы формы: 

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
}

+5

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 5112]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 3613]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 3440]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 3024]
[1]
13 Фев 2019, 14:23
Как получить значение CSS в javascript
[просмотров 2822]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 2750]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 2661]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 2405]

Вести с Хабра