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

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

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

다수의 v-model 연결하기(Multi v-model bindings)

• 지난 포스팅에서 vue3에서 v-model 사용하는 일반적인 방법을 살펴봤고, 기본 input과 event listeners를 바인딩하는 방법을 살펴봤다.
• 이번 포스팅에서는 vue3에서 2개의 v-model을 사용하는 방법을 살펴보겠다.

다수의 v-model 사용하기(v-model: Not one, but many)

• vue3에서는 싱글 컴포넌트에 v-model을 여러개 바인딩 할 수 있다.
• vue2에서는 자식 input, select을 통해 부모한테 데이터를 보낼때 payload object를 $emit할때 복잡한 경우가 종종 있다.

// vue2
this.$emit('input', {
    saluatiaon: 'Dr',
    name: 'Drake'
})

onInput (payload) {
    if(payload.salutation) {}
    if(payload.name) {}
}

• 위 코드는 일반적이지만 컴포넌트가 하는 일과, v-model payload에서 하는 일들을 이해하기 조금 복잡하다.
• 자식 컴포넌트에서는 어떤 일이 발생하는지 보기 쉽지만, 부모 컴포넌트에서 데이터를 함수로 받아 처리하는 과정이 다소 편해보이진 않는다.
• vue3에서는 복잡한 payload가 필요 없다.
• 코드를 통해 한번 살펴보자.
  • SalutationName 컴포넌트 생성 : input, select태그가 존재한다.
  • 각각 value를 바인딩해보자.

<template>
<div>
  <select name="salutation">
    <option value="">-</option>
     <option
      v-for="item of salutations"
      :value="item"
      :key="item"
      :selected="salutation === item"
    >
      {{ item }}
    </option>
  </select>

  <input
    :value="name"
    type="text"
    name="name"
  />
</div>
</template>
<script>
const salutations = [
  'Ms.',
  'Mrs.',
  'Miss',
  'Mx.',
  'Dr.'
]

export default {
  props: {
    salutation: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  setup () {
    return {
      salutations
    }
  }
}
</script>

• 간단하게 template, script 부분을 채웠다.
• vue3에서 setup을 사용했다. 위에 코드는 간단히 보면 vue2에서 data라고 생각하면 된다. salutations에 접근이 가능하다.
• props로 받은 saluatation은 select에 name은 input에 바인딩을 해주자.

<template>
  <div>
    <select 
        name="salutation" 
        @change="$emit('update:salutation', $event.target.value)"
    >
      <option value="">-</option>
      <option
        v-for="item of salutations"
        :value="item"
        :key="item"
        :selected="salutation === item"
      >
        {{ item }}
      </option>
    </select>

    <input
      :value="name"
      @input="$emit('update:name', $event.target.value)"
      type="text"
      name="name"
    />
  </div>
</template>

<script>
const salutations = [
  'Ms.',
  'Mrs.',
  'Miss',
  'Mx.',
  'Dr.'
]

export default {
  props: {
    salutation: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  setup () {
    return {
      salutations
    }
  }
}
</script>

• select태그로 설명하자면, prop salutation을 바인딩했고, update:salutation을 통해 자식에서 입력된 값을 부모한테 emit 한다.
• input 태그는 prop name을 바인딩했고, update:name으로 부모한테 value를 포함해 $emit할 수 있다.

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

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

<script>
import { reactive } from 'vue'
import SalutationName from './components/SalutationName'

export default {
  name: 'App',
  components: {
    SalutationName
  },
  setup () {
    const form = reactive({
      salutation: '',
      name: ''
    })

    return {
      form
    }
  }
}
</script>

• form 객체를 만들고 v-model에서 받아온 값을 할당해주는 코드이다.

결론

• 양방향 바인딩을 위해ㅓ v-model를 한번만 사용할 수 있었는데 vue3에서는 다수의 v-model를 사용하므로 효율성이 매우 좋다.

예제코드

• https://codesandbox.io/s/quizzical-satoshi-21nu6?file=/src/App.vue