VUE的UI框架中,有很多的UI组件。博主使用过的有:

1.出错了

最近在使用View UI的时,控制台发生了如下错误:

image-20210303001225905

初看时,还以为是父组件没有给子组件传值。但是看到父组件确实有传值。

2.定位问题

在控制台信息中的IOption可以推测,多半是下拉列表的组件Select有点问题。

<Select placeholder="请选择"
        v-model="house.buildingId">
    <Option></Option>
</Select>

由于表单这块数据,还不知道数据源,所以Option先占了位。但是这个组件在使用时,除了Select需要进行双向绑定(v-model),每一项Option都需要进行Value赋值,如下:

<Option v-for="item in items"
        :value="item.value"
        :key="item.value">{{ L(item.label) }}</Option>

3.问题扩展

通过查阅和尝试,下列情况,也会出现【Vue】Missing required prop:"value"

  • Option硬编码也会出现这个问题
  • Select没有双向数据绑定

如果非硬编码可以尝试下面写法:

<Option label="请选择.."
        value=""></Option>
<Option label="我是选项一"
        value="1"></Option>

image-20210303002954595