求助：VAutocomplete无法预显props传入的默认选中客户

核心问题 #

你的InvoiceTypeAndCustomerInfo组件中，本地定义的customer ref初始值是独立的空对象，没有同步父组件传入的props值，而AppAutocomplete的v-model绑定的是这个本地空对象，因此初始加载时无法匹配到列表中的客户选项，导致未选中。

另外，Vue中不允许直接修改props，你需要通过本地状态+事件emit的方式实现数据双向同步。

修复步骤 #

1. 同步本地状态与props初始值 #

将本地customer ref的初始值设置为父组件传入的props值，同时监听props的变化，确保父组件更新时子组件能同步状态。

2. 实现双向绑定的事件emit #

当本地customer变化时，通过emit事件通知父组件更新对应的状态，保证父子组件数据一致性。

修改后的子组件脚本代码 #

const props = defineProps({
  invoiceType: {
    type: Number,
    required: true,
  },
  customer: {
    type: Object,
    required: true,
  },
})

// 定义emit事件，对应父组件的@customer-changed
const emit = defineEmits(['customer-changed'])

// 初始化本地customer为props传入的客户对象（解构避免直接引用同一对象）
const customer = ref({ ...props.customer })

// 监听props的customer变化，同步到本地状态（deep监听对象内部属性变化）
watch(() => props.customer, (newCustomer) => {
  customer.value = { ...newCustomer }
}, { deep: true })

// 监听本地customer变化，触发事件通知父组件更新
watch(customer, (newCustomer) => {
  emit('customer-changed', newCustomer)
}, { deep: true })

const customers = ref([{ id: 1, fullname: 'Customer 1' }, { id: 2, fullname: 'Customer 2' }])

模板代码无需修改 #

你的AppAutocomplete模板配置是正确的：return-object确保v-model返回完整的客户对象，item-value="id"让组件通过id匹配选项，只要本地customer的id与列表中某一项的id一致，就能自动选中对应客户。

原代码失效原因 #

原代码中本地customer的初始值是{ id: 0, fullname: '' }，与父组件传入的{ id: 2, fullname: 'Customer 2' }是两个独立对象，且没有任何同步逻辑，因此AppAutocomplete无法在customers列表中找到匹配的选项，自然显示未选中状态。

内容的提问来源于stack exchange，提问作者A. Student