先说一下问题，最近做的项目是发送请求获取品牌数据后展示在页面，点击选中品牌后重新发送请求，获取新的需要展示的品牌数据。

 getdata(){
      let _that = this
      let sendData ={
        page:'1',
      }
      let res = $.ajax({
           url:`url`,
           method: 'post',
           headers: {
            'Content-Type':'application/json;charset=utf8',
           },
           data:JSON.stringify(sendData),
          });
          if(res.data.brandinfo){
            _that.brandDatail.brandList = res.data.brandinfo.length>0?res.data.brandinfo:[]
          }
    },

使用 _that.brandDatail.brandList = res.data.brandinfo.length>0?res.data.brandinfo:[]来对data中的brandDatail进行赋值。结果：

进入页面第一次请求没有问题，但是当我选中其中两个品牌，再次发送请求的时候就有问题了

请求回来的数据里只有两个品牌，但是视图中还是上次请求的内容，并没有发生改变，这是因为官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

解决方案

官方定义：

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.obj, 'a', 0)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.obj,'a',1)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })

使用_that.$set(_that.brandDatail, 'brandList', res.data.brandinfo.length>0?res.data.brandinfo:[])可以看到视图进行了更新