编写用户信息页,用户的信息包括性别、婚姻状况等等需要选择的情况,所以使用Select 选择器与input输入框搭配,使编辑页变得美观,同时也出现问题:
刚开始是这样写的,报错了
<a-form-model-item label="婚姻状况" class="form-item-inline">
<a-select
allowClear
v-model="entity.IfMarried"
placeholder="请选择婚姻状况">
<a-select-option :value="true">已婚</a-select-option>
<a-select-option :value="false">未婚</a-select-option>
</a-select>
</a-form-model-item>
错误如下:
虽然不影响功能,但报错很难受,各种百度查文档发现了出错的原因和解决方法,原文https://juejin.cn/post/7164213488892510222 (非常感谢)
select组件的value绑定值的问题,value值只能是String和Number类型的值
而上面代码段中,value="true"是布尔类型的值, IfMarried返回的也是布尔值,true表示’已婚‘,false表示’未婚‘,因此需要修改数据类型
调用接口获取到用户信息后将 IfMarried值通过三元表达式过滤为字符串类型
getTheData (id) {
this.loading = true
this.$http.post('/Base_Manage/Base_User/GetTheData', { id: id }).then(resJson => {
this.loading = false
if (resJson.Success) {
this.entity = resJson.Data || {}
this.entity.IfMarried = this.entity.IfMarried?'true':'false'
} else {
this.$message.error(resJson.Msg)
}
})
},
然后再将开头代码段中布尔值改为字符串类型的值
<a-form-model-item label="婚姻状况" class="form-item-inline">
<a-select
allowClear
v-model="entity.IfMarried"
placeholder="请选择婚姻状况">
<a-select-option :value="'true'">已婚</a-select-option>
<a-select-option :value="'false'">未婚</a-select-option>
</a-select>
</a-form-model-item>
此时问题就解决了,希望能帮到人。