Vue에 클래스가 존재하는지 여러 요소를 검사하려면 어떻게 해야 합니까?

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>

모든 요소를 검색하여 "필수"가 존재하지 않는지 확인하고 존재하지 않는 경우 제출 버튼을 활성화하고 싶습니다.

원하는 클래스를 설정했다고 가정합니다.'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이벤트입니다.

저는 당신이 다른 방법으로 해결책을 얻을 수 있다고 생각합니다.loadFormDate와 직원이 있습니다.data() 내의 ID 변수입니다.따라서 클래스 이름을 체크하는 대신 이 두 변수가 비어 있는지 계산 속성에 없는지 체크할 수 있습니다.그 후 버튼을 비활성화 또는 활성화 할 수 있습니다.

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

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

...

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

언급URL : https://stackoverflow.com/questions/55958416/how-can-i-examine-multiple-elements-for-the-existence-of-a-class-in-vue