Vue(version 3) 주요 기능 정리(v-model) #4

v-model 의 기능을 소개해 보고자 합니다.
일단 vuejs를 쓰는 이유중에 하나 이기도 한 v-model은 입력 Element와 밀접한 관련이 있다.
주로 Input 에 사용하기 때문이다.
그리고 REST Api와도 관련이 있을 것이다.

이 페이지에서는 v-model을 input text에서 사용하는 법을 적어본다.

<template>

  <div>

    <!-- v-model 사용 -->

    <input type="text" placeholder="아이디" v-model="id" />

    <input type="text" placeholder="아이디" v-model="id" @update:modelValue="updateInput" />

   

    <!-- v-model 사용하지 않고-->

    <input type="text" placeholder="아이디" @input="eventInput" :value="vueLessId" />

    <button type="button" title="로그인" @click.stop="login"></button>

  </div>

</template>

<script setup lang="ts">

const id = ref<string>('')

let vueLessId: string | null = ''

// 입력 이벤트

const eventInput = (payload: Event) => {

  const target = payload.target as HTMLInputElement

 

  if (/(&#@)/.test(target.value)) {

    alert('특수문자 안돼~')

  }

  vueLessId = target.value

}

// 입력 이벤트

const updateInput = () => {

  if (/(&#@)/.test(id.value)) {

    alert('특수문자 안돼~')

  }

}

const login = () => {

  if (id.value.trim() == '') {

    alert('아이디를 입력하세요.')

  }

  // API 조회

}

</script>

위 처럼 v-model만 사용하여, "변수" = "입력 받은값" 으로 사용이 가능하다.
다른 코드를 접해보지 않은 사람은 의아해 하겠지만, jquery를 사용한다면 이 기능이 얼마나 많은 작업을 축소 시켜둔 내용인지 알 것이다.
jQuery -> input에 유니크한 id나 name 지정 -> 이 input을 찾고 -> input이 찾아졌는지 체크 -> 찾았으면 이 input에서 값을 조회
만약에 jQuery를 사용한다면 위의 작업이 필요하지만, vuejs에서는 변수에 v-model을 선언한 것만으로도 값을 간단하게 조회가 가능하다.

@update:modelValue 의 이벤트로 입력 받은 하나하나의 값을 체크할 수도 있다. 단, 입력은 이미 된 상태의 이벤트를 받는다.

3번째 처럼 v-model을 분리해서 사용도 가능하다. @input의 이벤트는 입력한 내용을 직접 컨트롤 할 때 사용한다.

<template>

  <div>

    <input type="text" placeholder="아이디" v-model="LoginRequest.id" />

    <input type="password" placeholder="패스워드" v-model="LoginRequest.password" />

    <button type="button" title="로그인" @click.stop="login"></button>

  </div>

</template>

<script setup lang="ts">

interface LoginInfo {

  id: string

  password: string

}

const router = useRouter()

const LoginRequest = reactive<LoginInfo>({

  id: '',

  password: ''

})

const login = async () => {

  const api = new LoginApi()

  const response = await api.login(LoginRequest)

  if (response.success) {

    // 로그인 성공

    router.push('/Main')

  } else {

    // 로그인 실패

    alert('로그인 실패')

  }

}

</script>

이렇게 하나의 Object를 생성하여 입력 받은 값을 바로 Api에 넣어줄 수 있도록 설계가 가능하다.

쓰다보니 글이 길어져서 5번째도 v-model의 주제로 써볼까한다.