vue 项目报错 Error in render: “TypeError: Cannot read property ‘toLowerCase‘ of undefined“
1.使用 ant design of vue 的 select 选择器功能里面的带搜索框 搜索功能时,报错2. 报错的原因2.1 使用的函数 filterOption 调用了字符串的方法 toLowerCase,但是选择器拿到的值为 undefined,就会出现该错误。2.2 打印该函数,来验证该问题控制台打印结果,select 选择器,确实取到的children 的text值是undefined
·
1.使用 ant design of vue 的 select 选择器功能里面的带搜索框 搜索功能时,报错

2. 报错的原因
2.1 使用的函数 filterOption 调用了字符串的方法 toLowerCase,但是选择器拿到的值为 undefined,就会出现该错误。

2.2 打印该函数,来验证该问题

控制台打印结果,select 选择器,确实取到的children 的text值是undefined。

3. 如何解决
3.1 由于先前,使用select 选择器时,使用了动态加载接口数据出来只是做选择作用,并没有在该基础上添加 搜索功能。
<a-select label-in-value :default-value="{ key: '---选择---' }"
style="width: 70%"
@change="handleChangeName"
size="large" :disabled="disabled" option-label-prop="label">
<a-select-option v-for="item in packingNames"
:key="item.id" :value="item.id"
:label="item.packingName" >
<span role="img" :aria-label="item.packingName">
{{item.packingName}}
</span>
</a-select-option>
</a-select>
3.2 修改成带搜索的选择框,对以上代码进行修改
<a-select show-search placeholder="请选择"
style="width: 70%" option-filter-prop="children" :filter-option="filterOption"
@change="handleChangeName"
size="large" >
<a-select-option v-for="item in packingNames"
:key="item.id" :value="item.packingName" >
{{item.packingName}}
</a-select-option>
</a-select>
3.3 最后效果

更多推荐



所有评论(0)