[Vuejs]-How to bind state located in a parent component to a reusable selectInput component in Vue 3?

by

3👍

✅

This is what v-model is for. Assign your ref value to v-model, then the child component will need to accept it as a prop and emit any changes to the parent.

Parent component

<SelectInput v-model="user.favoriteColor" />

Child component

<select :value="modelValue" @change="updateModel">

defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

function updateModel(e) {
    emit('update:modelValue', e.target.value)
}

Vue Playground example

👤yoduh

Leave a comment