项目中有个需求,在表格里点击某条数据弹出窗口进行修改值,当时弹出的是input上进行修改,所以当我点击数据的时候,先进行回显原先的数据,再进行修改。
点击某条数据,弹出窗口,进行后台请求,将后台返回的数据名称进行赋给这个名称的input框
<input type="text" v-model="form.name"> methods:{ //请求数据 goodsList(id){ this.$request(this.$config.baseApi+'/user/address/index?uid='${id},'get') .then(res=>{ if (res.code===200){ //如果用这种方式直接赋值,很可能会在页面上不能编辑,所以让它强制刷新 //根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 // this.form.name=res.data.content //解决办法:$set this.$set(this.form,'name',this.form.name) } }) } }
网上搜的还有一种解决方案就是直接在data里边先列出变量,eg:
data(){ return{ form:{ name:' ' } } },
但当时项目的form里边的变量不定,需要后台给出,所以只能通过第一中方法,用哪种方法还需要看情况而定