Vue3 VModel

The usage in a Vue component:

<CustomInput v-model="searchText" />

The component:

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

The “modelValue” placeholder is for the v-model attribute. It can be any other property, for example “title”:

<MyComponent v-model:title="bookTitle" />

Originally written on Mar 6, 2023.