在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