[Vuejs]-Pass prop to child component with v-model

by

0👍

✅

Looks like you are using customer twice, once as ref and once as prop. The autocomplete uses the ref, where lastname is empty – so there actually is a value selected, it just has no label to display.

Instead, you can use the prop directly. Just remove the ref and v-model from the AppAutocomplete, and wire it to work with the customer prop:

const props = defineProps(['customer'])
const emit = defineEmits(['update:customer'])

and in the template:

<AppAutocomplete
    :modelValue="customer"
    @update:modelValue="emit('update:customer', $event)"
    ...
>

Now you can do <InvoiceTypeAndCustomerInfo v-model:customer="yourCustomer"/>

Alternatively, you can rename the ref and use a watcher to copy the prop value to the internal ref. This depends on how you want to use the component, particularly how you emit the update event, which is not specified in the question. But in any way, you will use watcher like:

const selectedCustomer = ref()
watch(
  () => props.customer,
  () => selectedCustomer.value = props.customer,
  {immediate: true}
)

and

<AppAutocomplete
  v-model="selectedCustomer"
  ...

Now any update to customer on InvoiceTypeAndCustomerInfo will update the selected value.

Hope it helps

Leave a comment