uni-app开发之vue双向绑定不起作用

1. 实现效果：点击某个item时选中和未选中效果来回切换

   
   效果图.png
2. 实现关键点：标识每个item的是否选中的属性进行false和ture切换
3. 问题描述：点击某个item时，数据列表确认已改变，但是页面并没有渲染刷新
4. 问题：为什么双向绑定没有起作用？
5. 分析：
   (1)数据源的数据结构：该数据源style_sProcess是一个对象，里面又包含4个子对象

{
  "tshirt-001": {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-001",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "60",
    "process_name": "袖英暗缝",
    "price": "0.5",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "袖子",
    "isSelected": true
  },
  "tshirt-002": {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-002",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "52",
    "process_name": "绷侧缝",
    "price": "0.38",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "领子",
    "isSelected": true
  },
  "tshirt-003": {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-003",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "32",
    "process_name": "绷袖",
    "price": "0.3",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "袖子",
    "isSelected": true
  },
  "tshirt-004": {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-004",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "22",
    "process_name": "质检",
    "price": "0.2",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "质检",
    "isSelected": false
  }
}

(2)页面结构

<view class="grid col-3 padding-sm">
    <view v-for="(item,index) in style_sProcess" class="padding-xs" :key="index">
        <button class="cu-btn orange lg block" :class="item.isSelected?'bg-orange':'line-orange'" @tap="chooseProcess"
                         :data-process-id="item.process_id">{{item.process_name}}
        </button>
    </view>
</view>

(3)点击事件处理

    chooseProcess(e) {              
        let id = e.currentTarget.dataset.processId;

        //方式一（未成功：直接赋值）     
        //this.style_sProcess[id].isSelected = !this.style_sProcess[id].isSelected;

        //方式二（未成功：中间量）              
        //var items = this.style_sProcess;
        //items[id].isSelected = !items[id].isSelected;
        // this.style_sProcess = items;//更新列表

        //方式三（未成功：set方式）            
        //this.$set(this.style_sProcess[id], "isSelected" , !this.style_sProcess[id].isSelected);

        //方式四（未成功：属性赋值会覆盖其他属性，每项仅剩一个属性）     
        //this.style_sProcess[id] = {isSelected: !this.style_sProcess[id].isSelected};

        //方式五（成功：通过Object.asign增量的方式赋新值）        
        let oldEntity = JSON.parse(JSON.stringify(this.style_sProcess));
        var items = this.style_sProcess;
        items[id].isSelected = !items[id].isSelected;
        Object.assign(oldEntity, items);
        this.style_sProcess = oldEntity;
                
        console.log("当前款式所有工序列表style_sProcess: " + JSON.stringify(this.style_sProcess));
                
    },

备注:vue在做双向绑定时，如果通过程序赋值直接给二级属性单独赋值 ，可能会产生双向绑定失效的情况。

6. 解决：通过Object.asign增量的方式赋新值可规避双向绑定失效
7. 拓展—另一种格式的数据源
   (1)数据源的数据结构：该数据源processList是一个数组，里面包含4个对象

[
  {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-001",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "60",
    "process_name": "袖英暗缝",
    "price": "0.5",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "袖子",
    "isSelected": true
  },
  {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-002",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "52",
    "process_name": "绷侧缝",
    "price": "0.38",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "领子",
    "isSelected": true
  },
  {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-003",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "32",
    "process_name": "绷袖",
    "price": "0.3",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "袖子",
    "isSelected": true
  },
  {
    "machine_type": "",
    "process_require_path": " ",
    "process_id": "tshirt-004",
    "process_video_path": " ",
    "company_id": "20190221002",
    "standard_time": "22",
    "process_name": "质检",
    "price": "0.2",
    "purchase_order_id": "20190527001",
    "process_guide": "",
    "part_name": "质检",
    "isSelected": true
  }
]

(2)页面结构

<view class="grid col-3 padding-sm">
    <view v-for="(item,index) in processList" class="padding-xs" :key="index">
        <button class="cu-btn orange lg block" :class="item.isSelected?'bg-orange':'line-orange'" @tap="chooseProcess"
                         :data-process-id="item.process_id">{{item.process_name}}
        </button>
    </view>
</view>

(3)点击事件处理

chooseProcess:function(e){
    let items = this.processList;
    let id = e.currentTarget.dataset.processId;
    console.log("ChooseProcess_1:" + id);
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
        if (items[i].process_id == id) {
            items[i].isSelected = !items[i].isSelected;
            this.processList = items;//更新列表
            console.log("ChooseProcess_2:" + this.processList[i].isSelected);
            break;
        }
    }
},

(4)效果

![image.png](https://img.haomeiwen.com/i1892430/baa4fc1f15c7e5cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)