[Vue.js] Vue3 데이터 중복 검사

 

 

 

유효성 검사와 마찬가지로 많이 사용하는 데이터 중복 검사.

간편하게 해보자.

 

 

index 기준으로 중복 데이터 찾기.

 

 

<template v-slot:name="data">
  <el-input v-model="data.row.name"></el-input>
  <span class="badge badge-danger mt-1" v-if="checkData(data.$index)">이미 존재하는 이름 입니다.</span>
</template>

 

const checkData = (index) => {
  if (tableData.value.length > 1) {
    let dataIndex = 0;
    for (let data of tableData.value) {
      if (data.name != "" && dataIndex != index) {
        if (data.name == tableData.value[index].name) {
          return true;
        }
      }
      dataIndex++
    }
  }
  return false;
}

 

 

 

중복 될 때.

 

 

중복 되지 않을 때.

 

 

 

입력 값 기준으로 찾는거라 실시간으로 적용 된다.

 

 

 

+

 

 

이런식으로 alert 띄우면서 바로 체크도 가능하다.

 

 <el-button @click="dupleCheck">중복 체크</el-button>

 

const dupleDataCheck = async () => {
  let commonData = ;
  let list = ;
  let dupYn = false;

  list.forEach(dup => {
    for(let data of dup.alias) {
      const check = dup.alias;
      
      for(let data of listData.alias) {
        if(check === listData.alias) {
          dupYn = true;
          alert(dup.alias + '는 이미 존재하는 별명입니다.')
          dup.alias= "";
          break;
        }
      }
      if(dupYn) {
        break;
      }
    }
  });
}

 

 

 

 

 

 

 

 

유효성 검사

https://devel-log.tistory.com/71

[Vue.js] Vue3 : Vuetify Form-validation 유효성 검사