Vue3 - v model

📌 목차

• Introduction
• v-model(value, event)
• v-model argument
• mutilple v-model
• Conclusion
• Reference

📌 Introduction

안녕하세요. vue3에서 v-model에 새로운 기능들이 있어서 이렇게 포스팅을 작성하게 되었습니다. 해당 코드는 여기서확인 할 수 있습니다.

📌 v-model(value, event)

새롭게 바뀐 vue3에서는 이제 props로 value와 input 이벤트로 v-model을 사용할 수 없습니다.

value -> model-value
@input -> @update:model-value

로 바뀌었습니다.

<template>
  <input type="text" :value="modelValue" @input="onInput" />
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ""
    }
  },
  methods: {
    onInput(e) {
      this.$emit('update:model-value', e.target.value);
    }
  }
}
</script>

📌 v-model argument

<template>
  <MyName v-model:first-name="name"/>
</template>

이런식으로 name을 지정해 줄 수 있습니다.

// MyName.vue
<template>
  <input type="text" :value="firstName" @input="onInputFirstName">
</template>

<script>
export default {
  props: {
    firstName: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInputFirstName(e) {
      this.$emit('update:first-name', e.target.value);
    }
  }
}

그럼 props로는 modelValue로 내려오는것이 아닌 지정된 name으로 내려오게 됩니다. 또한 update도 지정된 이름으로 update를 해줄 수 있습니다.

📌 mutiple v-model

위에서 배운 v-model 지정으로 이제 여러개의 v-model을 받을 수 있습니다.

<template>
  <MyName v-model:first-name="name" v-model:last-name="lastName"/>
</template>

<template>
  <input type="text" :value="firstName" @input="onInputFirstName">
  <input type="text" :value="lastName" @input="onInputLastName">
</template>

<script>
export default {
  props: {
    firstName: {
      type: String,
      default: ''
    },
    lastName: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInputFirstName(e) {
      this.$emit('update:first-name', e.target.value);
    },
    onInputLastName(e) {
      this.$emit('update:last-name', e.target.value);
    }
  }
}
</script>

📌 Conclusion

이번에는 v-model에 대해서 알아보았습니다. vue2와 많은 변화가 있지는 않지만 새로운 기능들이 추가되어 포스팅을 작성하게 되었습니다. 항상 v-model은 왜 한개여야할까 라는 의문이 있었는데 이렇게 되어 너무 반가웠습니다. 그럼 다음 포스팅에서 만나요!

📌 Reference

• Vue 3 공식 문서