问题描述

        vue2 中可以将数据与视图进行绑定，修改 data 对象的属性值将引起对应视图的改变。Vue2的数据视图绑定是通过JS特性这一语法实现，其使用中存在数据属性丢失的这 一 bug，主要针对 对象或数组 属性丢失。

        使用 antv 的 a-select （下拉框）组件，使用 v-mode 绑定对象 的值，但是 对象之前是没有赋值的，是一个 空对象 ，这就导致了 页面视图不刷新 ，但是 属性值有变化 ，这可以说是 vue2 的一个缺陷。

// 空对象

queryParam: {

      },

 解决方法

方法一 （设置初始值）

给 绑定的对象 赋初始值 null 或者 ' ' 

  queryParam: {
        approveStatus : null ,    
      },

        如果是普通 输入框 input ，这样的方法没什么问题，但是 我的页面使用 a-select 下拉框，默认有提示消息（ placeholder），如果 赋初始值 为空 ，下拉框会填充空白内容 ，覆盖之前的提示消息 ，这样的页面 会比较不美观且不友好

 <a-select  v-model="queryParam.approveStatus" placeholder="审核状态" :allowClear="true">
        <a-select-option v-for="status of videoApproveStatus" :key="status.id">
                 {{  status.text }}
        </a-select-option>
 </a-select>
                    
  <a-select  v-model="queryParam.videotypeid" placeholder="视频类型" :allowClear="true">
         <a-select-option v-for="d in videotype" :key="d.myid">
                 {{ d.name }}
          </a-select-option>
   </a-select>          

虽然这种方法可以解决绑定对象属性丢失问题，但是如果给 每个属性设置 初始值 为 null，那么所有的下拉框都是空白 ， 可以看到 下拉框 赋初始值 为 null ，页面的效果非常不友好 ，没有提示信息 ，所有这种方法不推荐

 方法二 （创建一个新的对象,替换原对象）

这种方法可以用于需要添加多个新属性,再把原对象与新属性合并到新对象中
Object.assign(目标对象,原对象, 新属性)

this.queryParam = Object.assign({}, this.queryParam, obj)

我这里是 利用 a-select 下拉框 自带的 下拉框 改变方法 ，@change ，该方法有两个参数 value 和 option ，value 代表你改变的值 ，option （我也不太明白 ，反正里面东西很多），然后 我利用 这个 @change 方法 和  Object.assign(目标对象,原对象, 新属性)， 解决了状态丢失问题 ，大家可以 参考下面的代码 ，根据自己的实际情况进行调整 （每个人的情况都不一样）

 <a-select @change="handleChange"  v-model="queryParam.approveStatus" placeholder="审核状态" :allowClear="true">
       <a-select-option v-for="status of videoApproveStatus" :key="status.id">
               {{  status.text }}
       </a-select-option>
 </a-select>

 handleChange(value,option) { 
      if(option) {
        //  解决双向绑定状态丢失
          this.queryParam = Object.assign({}, this.queryParam, option.context.queryParam)
      } else {
        return 
      } 
    },

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长