Vuetify에서 v-text-field에 rules 적용 및 rules 초기화하기

 

 

 

v-text-field에 rules 적용 및 rules 초기화하기

 

 

 

---

<버전 정보>

• vuetify version : 2.6.0

 

---

 

<사용 계기>

• Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중 아이템을 추가할 일이 있었다. 추가할 때에는 v-dialog를 띄워서 값을 넣고 클릭하면 DB 저장되는 간단한 기능이었다.
• 하지만 Firebase DB에 저장되는 터라 빈 값은 저장되지 않기 위하여 v-text-field의 rules 속성으로 직관적으로 보여주면 좋겠다고 생각하여 사용하게 되었다.

 

---

 

<적용 과정>

• rules를 적용하는 것은 아주 쉬웠다. 나중에 아래의 코드를 보면 알 수 있듯이 몇 가지만 추가하면 내 마음대로 커스텀할 수 있다. 하지만 rules에 대한 기능이 동작한 후 v-dialog이 꺼져도 계속 남아있는 문제가 있었다. 그래서 찾고 찾은 결과 v-dialog를 키면 rules에 대한 기능, 즉 validation을 초기화 할 수 있었다.

 

---

 

<실제 코드>

<v-dialog>
<!-- v-form을 추가하고 ref="설정하기 편한 이름" 을 지정한다. -->
  <v-form
    ref="form"
    lazy-validation
  >
    <v-row>
      <v-col cols="12">
        <v-text-field
          v-model="fsForm.fSaying"
          label="명언"
          :rules="rules"
          outlined
          clearable
          required
          hide-details="auto"
        ></v-text-field>
      </v-col>
      <v-col cols="12">
        <v-text-field
          v-model="fsForm.author"
          label="저자"
          :rules="rules"
          outlined
          clearable
          required
          hide-details="auto"
        ></v-text-field>
      </v-col>
    </v-row>
  </v-form>
</v-dialog>  
  
  
<script>
export default {
  data () {
    return {
      rules: [ // rules을 지정한다.
        value => !!value || '최소 1자이상 입력하여야 합니다!' 
      ]
    }
  },
  watch: { 
    addModFsDialog (visible) { // form을 열 때마다 reset한다.
      if (visible) {
        this.$nextTick(() => {
          this.$refs.form.resetValidation()
        })         }
      }
    }
  }
</script>

• 먼저 <v-text-field>태그의 상위에 <v-form>을 새로 추가하고 ref="이름" 속성을 추가하여 사용해보았다.
• rules은 공식홈페이지에 여러가지가 있었으나 나는 글자수가 0만 아니면 되었기에 목적에 맞게 가져와 사용하였다.
• 마지막으로 watch의 내용은 form을 열 때마다 유효성 검사를 reset하는 코드이다. this.$refs.form.resetValidation( )가 동작하면 ref="이름"으로 지정하였던 v-form으로 가서 내부에 있는 유효성 검사를 초기화 시킨다.
• 여기서 this.$nextTick을 사용해야하는 이유는 this.$refs.form.resetValidation( ) 코드가 DOM이 생성되기도 전에 동작하여 오류가 생겨서이다.

 

---

 

<정리>

• 여러 속성을 사용함으로써 <v-text-field>태그에 대하여 조금 더 자세히 알게된 것 같다.
• vuetify 공식사이트에서 원하는 rules을 찾아 그대로 적용하여도 잘 동작하였고, 나중에 시간이 나면 내 마음대로 더욱 커스텀하여 사용해보고 싶다.
• this.$nextTick( )도 이번에 처음 써보았는데 매우 유용한 기능인 것 같아서 적용가능한 다른 함수에도 적용해볼 생각이다.
• 아직 모르는 것이 많아 하나를 알려면 적어도 몇 개는 알아야 이해가 되는 부분이 많으나 결국 이런 것들이 쌓여서 나의 실력이 될 것임을 잘 알고 있으므로 더욱 더 꾸준히 노력하자. 

 

---

 

<참고 페이지>

• vuetify의 Text fields 공식사이트 : https://vuetifyjs.com/en/components/text-fields/

Text field component

 

• vuetify의 v-form 공식사이트 https://vuetifyjs.com/en/api/v-form/

v-form API

 

• nextTick( ) 참고 블로그 : https://doozi316.github.io/vuejs/2020/08/10/Vue4/  

VueJs - $nextTick() 이란?

 

• nextTick( ) 를 참고한 필자의 블로그 링크 : https://impnem.tistory.com/32

3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1