element中 input赋值后无法再次输入值

项目中有个需求,在表格里点击某条数据弹出窗口进行修改值,当时弹出的是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里边的变量不定,需要后台给出,所以只能通过第一中方法,用哪种方法还需要看情况而定

posted @ 2019-11-16 14:58  纯白棒球帽  阅读(2091)  评论(0编辑  收藏  举报