[Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers)

v-model 수식어(v-model modifiers)

• 지난 포스팅에서 2개의 v-model을 사용하는 법을 살펴봤다.
• 이번 포스팅에서는 vue3에서 v-model 커스텀 수식어(modifiers)를 사용하는 것을 살펴보겠다.

v-model 수식어 살펴보기

• vue2에서 사용했던 v-model 수식어들도 vue3에서 사용이 가능하다.
  • .lazy : input 이벤트 대신 change 이벤트를 받는다.
  • .number: 문자를 유효한 숫자로 변경한다.
  • trim : 공백을 없애준다.

v-model 커스텀 수식어 살펴보기

• 이전 포스팅에 만들었던 SalutationName 컴포넌트를 이어서 사용한다.
• capitalize라는 수식어를 만들어 보겠다. v-model:model 선언 후에 . 추가한 다음 수식어를 적어주면 된다.
  • salutation 에는 모든 문자를 대문자로 변경하는 수식어
    • v-model:salutation.capitalize="form.salutation"
  • name 에는 첫번째 문자만 대문자로 변경하는 수식어
    • v-model:name.capitalize="form.name"

// App.vue
<template>
  <div id="app">
    <SalutationName
      v-model:salutation.capitalize="form.salutation"
      v-model:name.capitalize="form.name"
    />

    <pre>{{ form }}</pre>
  </div>
</template>

• 위와 같이 사용하려면 우선 props로 modifiers를 생성해야 한다.
  • salutationModifiers는 v-model salutation과 바인딩
  • nameModifiers는 v-model name과 바인딩

// SalutationName.vue
[...]
props: {
  salutation: {
    type: String,
    default: ''
  },
  salutationModifiers: {
    default: () => ({}),
    type: Object
  },
  name: {
    type: String,
    default: ''
  },
  nameModifiers: {
    default: () => ({}),
    type: Object
  }
},
[...]

• salutationModifiers, nameModifiers 기본값이 빈객체이다.
• 수식어가 있으면 객체에 boolean 으로 modifier의 이름을 key로 value는 true로 추가된다. 만약 없으면 빈객체를 유지한다.
• capitalize 수식어가 있으면 아래 객체처럼 된다.

{
  capitalize: true
}

SalutationName 컴포넌트 개선하기

• 이제 SalutationName 컴포넌트를 개선해보자.
• 기존에는 이벤트가 발생하면 바로 인라인으로 $emit을 작성했지만, 이걸 methods쪽에 함수로 빼서 커스텀 수식어에 대한 로직을 추가하자.

// SalutationName.vue
<template>
  <div>
    <select
      name="salutation"
      @change="updateSalutation" // 이 부분이 변경
    >
      <option value="">-</option>
      <option
        v-for="item of salutations"
        :value="item"
        :key="item"
        :selected="salutation === item"
      >
        {{ item }}
      </option>
    </select>

    <input
      :value="name"
      @input="updateName"  // 이 부분이 변경
      type="text"
      name="name"
    />
  </div>
</template>

<script>
const salutations = [...]

export default {
  props: {
    salutation: {
      type: String,
      default: ''
    },
    // Holds the modifiers for the salutation v-model
    salutationModifiers: {
      default: () => ({})
    },
    name: {
      type: String,
      default: ''
    },
    // Holds the modifiers for the name v-model
    nameModifiers: {
      default: () => ({})
    }
  },
  setup (props, { emit }) {
    // vue3 setup 사용
    // salutation, name에 대한 이벤트를 함수로 정의하는 로직으로 개선
    // 현재 상태는 코드 변경전이랑 똑같이 작동한다.
    const updateSalutation = event => {
      let val = event.target.value

      emit('update:salutation', val)
    }

    const updateName = event => {
      let val = event.target.value

      emit('update:name', val)
    }

    return {
      salutations,
      updateSalutation,
      updateName
    }
  }
}
</script>

• setup() 함수는 첫번째 인자는 props를 받고 두번째 인자는 컴포넌트 인스턴스 context를 받는다. 그 안에 emit이 있다.
• 이제 updateX 함수에 capitalize 수식어가 있을 경우 대한 로직을 추가하자.

// SalutationName.vue
setup (props, { emit }) {
  const updateSalutation = event => {
    let val = event.target.value
    if (props.salutationModifiers.capitalize) {
      val = val.toUpperCase()
    }

    emit('update:salutation', val)
  }

  const updateName = event => {
    let val = event.target.value
    if (props.nameModifiers.capitalize) {
      val = val.charAt(0).toUpperCase() + val.slice(1)
    }

    emit('update:name', val)
  }

  return {
    salutations,
    updateSalutation,
    updateName
  }
}

문제

• 이번에 알아본 포스팅을 한번 더 복습하고자 문제를 냅니다.
  • name에 대한 수식어를 추가
  • reverse라는 수식어를 추가하면 name value가 반대로 나오게 작성해보자.
  • tip : 수식어들은 체이닝이 가능하다.
    • v-model:name.capitalize.reverse="form.name"

결론

• modifiers(수식어)에 대한 개념이 잡혔고 props로 객체로 받고 수식어에 대한 값을 boolean으로 체크 하는 로직을 알게 되어 내부적으로 vue에 대한 지식이 깊어진것 같다.

예제코드

• https://codesandbox.io/s/nostalgic-mestorf-vf9g1?file=/src/App.vue

nostalgic-mestorf-vf9g1 - CodeSandbox

 

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점)

[Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점)

2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기)

[Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기)