uni-app开发之vue双向绑定不起作用
2019-06-28 本文已影响0人
瑟闻风倾
-
实现效果：点击某个item时选中和未选中效果来回切换
效果图.png
- 实现关键点：标识每个item的是否选中的属性进行false和ture切换
- 问题描述：点击某个item时，数据列表确认已改变，但是页面并没有渲染刷新
- 问题：为什么双向绑定没有起作用？
- 分析：
(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在做双向绑定时，如果通过程序赋值直接给二级属性单独赋值 ，可能会产生双向绑定失效的情况。
- 解决：通过Object.asign增量的方式赋新值可规避双向绑定失效
- 拓展—另一种格式的数据源
(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)效果
