Vue对话框中Dropdown与Calendar选中值不显示但提交有效问题

问题背景 #

在Dialog弹窗的表单里使用Dropdown和Calendar组件，选中选项后输入框内不显示选中值，但提交时该值实际存在。

Dropdown组件修复方案 #

1. 移除Dialog的:value属性干扰 #

你给Dialog绑定了:value="delivery"，这会和内部表单的v-model产生冲突。PrimeVue的Dialog不需要通过value传递表单数据，直接移除该属性即可。

2. 确保delivery是响应式对象 #

如果delivery是手动创建或从后端获取的普通对象，必须用Vue的reactive或ref包裹，否则属性更新无法触发视图渲染：

import { reactive } from 'vue';

// 初始化响应式的delivery对象
const delivery = reactive({
  FinalStorage: '',
  DeliveryWeight: '',
  TimeToLoad: '',
  TimeToUnload: ''
});

3. 验证选项ID与绑定值类型匹配 #

确认storages数组中每个项的id是字符串类型（和delivery.FinalStorage的类型一致）。如果你的id是嵌套结构（比如id.value），需要把option-value改成id.value，但根据你提供的结构，当前配置是正确的。

Calendar组件修复方案 #

1. 初始化date变量 #

Calendar组件需要一个初始值（可以是null或Date对象），未初始化的变量可能导致选中后视图不更新：

import { ref } from 'vue';

// 初始化date变量
const date = ref(null);

2. 处理Dialog渲染时机问题 #

Dialog首次显示时，Calendar可能还未完成挂载，导致值更新无法触发视图更新。可以通过@show事件配合nextTick手动触发更新：

<Dialog 
  v-model:visible="displayNewDelivery"
  :style="{ width: '30vw' }" 
  :modal="true" 
  class="p-fluid"
  header="Add New Delivery"
  @show="handleDialogShow">
  <!-- 内部表单内容 -->
</Dialog>

import { nextTick } from 'vue';

const handleDialogShow = () => {
  nextTick(() => {
    // 如果date已有值，重新赋值触发更新
    if (date.value) {
      date.value = new Date(date.value);
    }
  });
};

修复后的完整Dialog代码 #

<Dialog 
  v-model:visible="displayNewDelivery"
  :style="{ width: '30vw' }" 
  :modal="true" 
  class="p-fluid"
  header="Add New Delivery">

  <div class="card p-fluid">
    <div class="field">
      <strong><label for="ddate">Delivery Date</label></strong>
      <Calendar inputId="basic" v-model="date" autocomplete="off" />
    </div>

    <div class="field">
      <strong><label for="dw">Delivery Weight</label></strong>
      <InputNumber id="dw" v-model.trim="delivery.DeliveryWeight" required="true" autofocus />
    </div>

    <div class="field">
      <strong><label for="lon">Final Storage</label></strong>
      <Dropdown
            id="dfinal"
            v-model="delivery.FinalStorage"
            :options="storages"
            option-label="designation"
            option-value="id"
            placeholder="Select a Storage"/>
    </div>

    <div class="field">
      <strong><label for="ttl">Time To Load</label></strong>
      <InputNumber id="ttl" v-model.trim="delivery.TimeToLoad" required="true" autofocus />
    </div>

    <div class="field">
      <strong><label for="str">Time To Unload</label></strong>
      <InputNumber id="str" v-model.trim="delivery.TimeToUnload" required="true" autofocus />
    </div>
  </div>
  <template #footer>
    <Button
      label="Save"
      @click="addDelivery"
      icon="pi pi-check"
      class="p-button-outlined"
    />
  </template>
</Dialog>

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