Vue中Autocomplete组件initialDisplay属性赋值后不显示内容问题

问题根因及对应解决方案 #

1. 异步数据加载导致初始化时序问题

你传入的customer是从Firebase异步拉取的，CustomerAutoComplete组件初始化时customer还为空，多数自定义Autocomplete组件不会监听initialDisplay属性的后续变化，所以数据拉取完成后也不会更新显示。
解决方案：给组件加v-if判断，等customer加载完成后再渲染组件：

<CustomerAutoComplete
  v-if="customer && customer.id"
  description="Select customer associated with this project"
  label="Customer"
  placeholder="Customers"
  @selected="clientSelected"
  :initialDisplay="customer"
  v-model="projectForm.customerId"
/>

2. 显示字段不匹配

CustomerAutoComplete组件内部默认可能是读取label/value等字段作为显示文本，你传入的customer对象的显示字段是name，没有匹配到组件要求的字段名就会显示为空。
解决方案：检查组件的props说明，添加指定显示字段的属性，常见写法如下：

<!-- 比如组件要求用displayKey指定显示字段 -->
<CustomerAutoComplete
  ...
  displayKey="name"
/>

如果是你自行封装的组件，可在内部直接指定读取name字段，或者给initialDisplay加响应式监听：

// CustomerAutoComplete 组件内部添加监听逻辑
watch: {
  initialDisplay: {
    immediate: true,
    handler(val) {
      if (val) this.innerDisplayText = val.name
    }
  }
}

3. 属性绑定冲突

你同时绑定了v-model和initialValue两个属性，二者作用重复，组件可能优先读取了初始化时为空的projectForm.customerId，覆盖了初始值逻辑。
解决方案：移除多余的initialValue绑定，拉取到数据时同步给projectForm.customerId赋值即可：

// 你的数据拉取逻辑中同步赋值
async getProjectData() {
  // 拉取项目数据逻辑省略
  this.projectForm = projectData
  // 拉取关联客户数据后同步赋值
  this.customer = customerData
  this.projectForm.customerId = customerData.id
}

内容的提问来源于stack exchange，提问作者Ibrahim CISSE