Vee 동적 입력 행 처리 검증

Vee 동적 입력 행 처리 검증

동적으로 추가된 입력 필드의 유효성을 확인하려고 합니다.검증할 입력의 행이 1개뿐일 때는 항상 유효하게 동작합니다.

워킹 케이스의 예:

그러나 행을 추가할 때마다 검증에서는 각 행을 개별적으로 검증하는 대신 첫 번째 행과 추가된 행을 모두 검증합니다.이것이 문제의 경우입니다.

문제 사례:

문서에서는 :key에 고유 ID를 지정할 것을 제안하고 있습니다만, 고유 ID 필드를 추가한 후에도 문제가 발생하고 있습니다.

입력 생성용 코드입니다.

   <!-- Generate input fields and v-model -->
    <tr v-for="(row, rowIndex) in dataFields" :key="row.id">
      <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
        <!-- create first row and add valdiation -->
        <input
          type="text"
          class="input-style"
          v-model="dataFields[rowIndex][fieldName]"
          v-validate.initial="'required'"
          :name="fieldName"
        >
        <br>
        <span> errors.first(fieldName)}}</span>

다음은 이 문제의 완전한 데모입니다.https://codesandbox.io/s/vue-template-rtjj9?fontsize=14

동적으로 추가된 각 행에 검증을 추가하려면 어떻게 해야 합니까?

추가할 수 있습니다.rowIndex다른 이름을 붙이다

<tr v-for="(row, rowIndex) in dataFields" :key="row.id">
  <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex">
    <!-- create first row and add valdiation -->
    <input
      type="text"
      class="input-style"
      v-model="dataFields[rowIndex][fieldName]"
      v-validate.initial="'required'"
      :name="fieldName + rowIndex"
      :data-vv-as="fieldName"
    >
    <br>
    <span @click="clicky()">{{errors.first(fieldName + rowIndex)}}</span>
  </td>
</tr>

를 사용할 수 있습니다.data-vv-as검증 메시지의 이름 필드를 커스터마이즈합니다.

데모는 이쪽

언급URL : https://stackoverflow.com/questions/57229228/vee-validate-handling-dynamic-input-rows