vue:el-input使用v-model绑定多层嵌套对象后编辑时数据无法修改
问题:新增操作时无影响,但到了编辑操作时,虽然输入框有值,但无法对其进行删除或修改(预估是在初始化赋值那步有问题)代码如下:<el-form:model="userInfo"ref="ruleForm":rules="rules"label-width="160px"size="mini"><el-form-item label="详细地址" prop="location.pla
·
问题:新增操作时无影响,但到了编辑操作时,虽然输入框有值,但无法对其进行删除或修改(预估是在初始化赋值那步有问题)
代码如下:
<el-form
:model="userInfo"
ref="ruleForm"
:rules="rules"
label-width="160px"
size="mini"
>
<el-form-item label="详细地址" prop="location.placeText">
<el-input
placeholder="请输入详细地址"
v-model="userInfo.location.placeText"
></el-input>
</el-form-item>
</el-form>
data 定义的数据
userInfo: {
location: {
placeText: ""
}
}
编辑时初始化数据方法 (错误方法)
getUserInfo: function () {
request.getUserInfo().then(res => {
//在这一步时data里的数据项被修改,嵌套的location对象没有了,导致input输入框里的数据无法进行双向绑定
this.userInfo = res.userInfo ;
this.userInfo.location= res.location;
})
},
最后发现是因为后台给的数据是把我嵌套的对象拆分成了两个对象传给我,所以我不应该用返回数据里的其中一个对象给data里的数据赋值,导致嵌套的location对象没有了,input输入框里的数据也就无法进行双向绑定
如下即可:(正确方法)
getUserInfo: function () {
request.getUserInfo().then(res => {
let userInfo = res.userInfo ;
userInfo.location= res.location;
this.userInfo = userInfo ;
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)