У меня есть приложение 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>Должен быть поиск по всем элементам, чтобы увидеть, что «необходимо заполнить» не существует ни в одном элементе формы на предмет заполненных полей, и только после этого акоивировать кнопку.
+2
Loading...
Сначала создаешь переменную, определяющую состояние кнопки:
data() { return { disabled: true, } }Потом добавляешь это в кнопку соответственно, и ставишь ref для формы:
Ну и далее, пишем функцию, которая обходит элементы формы:
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 }