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

代码如下:

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

Logo

前往低代码交流专区

更多推荐