vue:el-input使用v-model绑定多层嵌套对象后编辑时数据无法修改

最新推荐文章于 2025-02-27 00:30:35 发布

狗狗龙

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量9.1k

点赞数 4

分类专栏：错误解决分析文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_41854262/article/details/123374425

版权

错误解决分析专栏收录该内容

1 篇文章

订阅专栏

问题：新增操作时无影响，但到了编辑操作时，虽然输入框有值，但无法对其进行删除或修改（预估是在初始化赋值那步有问题）

代码如下：

<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 ;
    })
},