In Vue.js version 3.5, you can make a Vue component work with v-model using the defineModel macro. For example:
<!-- BaseInput.vue --> <script setup> const value = defineModel(); </script> <template> <input type="text" v-model="value" /> </template> <!-- App.vue --> <script setup> import { ref } from "vue"; import BaseInput from "./components/BaseInput.vue"; const value = ref(""); </script> <template> <BaseInput v-model="value" /> </template> In Vue.js versions below 3.5, the defineModel macro does not exist. Instead, you can use the modelValue prop to receive the v-model value, and emit the update:modelValue event to update it.
<!-- BaseInput.vue --> <script setup> const props = defineProps(["modelValue"]); const emit = defineEmits(["update:modelValue"]); </script> <template> <input type="text" :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)" /> </template> <!-- App.vue --> <script setup> import { ref } from "vue"; import BaseInput from "./components/BaseInput.vue"; const value = ref(""); </script> <template> <BaseInput v-model="value" /> </template> Alternatively, you can use a computed property, where the getter returns props.modelValue, and the setter emits the update:modelValue event.
<!-- BaseInput.vue --> <script setup> import { computed } from "vue"; const props = defineProps(["modelValue"]); const emit = defineEmits(["update:modelValue"]); const value = computed({ get: () => props.modelValue, set: (newValue) => emit("update:modelValue", newValue), }); </script> <template> <input type="text" v-model="value" /> </template> <!-- App.vue --> <script setup> import { ref } from "vue"; import BaseInput from "./components/BaseInput.vue"; const value = ref(""); </script> <template> <BaseInput v-model="value" /> </template> 
Top comments (0)