vue使用动态渲染v-model输入框无法输入内容

<a-col :span="8" v-for="(item, index) in Data" :key="index">
  <a-form-model-item class="custom-col-charge" :label="`${item.name}:`" v-if="item.type === 'SELECT_BOX'">
    <a-select allowClear placeholder="请选择" v-model="item.value">
      <a-select-option v-for="(selectItem, selectIndex) in item.select" :key="selectIndex" :value="selectItem.code" :label="`${selectItem.name}`">{{ selectItem.name }}</a-select-option>
    </a-select>
  </a-form-model-item>
  <a-form-model-item class="custom-col-charge" :label="`${item.name}:`" v-if="item.type === 'DATE'">
    <a-date-picker v-model="item.value" :format="dateFormat" />
  </a-form-model-item>
  <a-form-model-item class="custom-col-charge" :label="`${item.name}:`" v-if="item.type === 'TEXT'">
    <a-input
      v-model="item.value"
      :id="`businessProcessingDate_${index}`"
    />
  </a-form-model-item>
</a-col>

解决办法:

获取 data 数据时,进行深拷贝。

this.data = JSON.parse(JSON.stringify(res.data)); // res.data是从接口返回的数据

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注