axios请求返回后el-dialog的from视图不刷新怎么办?

Question

1、数据更新了,但是视图没刷新
2、关闭dialog后刷新了
3、发现只有被from model绑定的数据没刷新，并且绑定后即使在其他地方用for循环视图都不刷新
4、如果在from外面放一个没被绑定的数据（test）倒是能触发from视图刷新

<el-dialog title="new" :visible.sync="dialogVisible">
    <div v-for="(item,index) in test" :key="index"></div>
    <el-form ref="form" :model="goods_create"></el-form>
</el-dialog>

export default {
  data() {
    return {
      test:"",
      goods_create:{}
      }
    },
  methods:{
    edit_show(e) {
      axios.get("/api/goods_sku", {
        params:{
          goods_id:goods_id
        }
      }).then(response => {
        this.goods_create.sku = response.data;
        this.test=[1,2,3]
      });    
    }
  }
}

  

Answer 1

直接给 this.goods_create 添加未初始化属性，是非响应式的。试试以下两种解决方案：

对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

.then(response => {
    this.$set(this.goods_create, ‘sku’, response.data) 
})

or
初始化响应式属性

data () {
    return {
        goods_create: {
            sku: null
        }
    }
}

Answer 2

从隔壁看到的解决方法，原理还不知道，望路过的大佬解答

this.goods_create = {
    ...this.goods_create,
    sku: response.data
}