티스토리 뷰

Working log

[vuejs]Vuetify validation 체크

까오기 2021. 12. 1. 09:08

중복 체크 등 함수 호출할 때 예시입니다. 

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="4">
        <v-form ref="form">
          <v-text-field
            v-model="id"
            :rules="idRules"
          ></v-text-field>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
  export default {
    data: () => ({
      ids: ['aa','bb'],
      id: null
    }),
    computed: {
      idRules () {
        const rules = []
        const rule = v => !!v || 'ID는 필수입니다'
        rules.push(rule)
        const dupRule = v => this.checkId(v) || '동일한 ID가 존재합니다'
        rules.push(dupRule)
        return rules
      },
    },
    methods: {
      checkId(v) {
        for(var i=0;i<this.ids.length;i++){
          if(this.ids === v){
            return false
          }
        }
        return true
      }
  }
</script>
댓글
댓글쓰기 폼