vue-vux使用 cell/cell-box 组件 点击展开其他内容的时候修改过的数据会复原解决思路之一

问题描述

vue-vux使用

cell/cell-box

组件，点击展开其他内容的时候修改过的数据会复原。

但其实，在数据库已经修改好了，这个时候使用APP者还以为还没修改过数据。

解决思路

解决思路之一

改变数据源，重新渲染数据的时候就不会复原。（更人性化）

解决思路之二

重新请求查询。

示例

<div v-for="item in this.dataList.data">
<cell :title="item.GROUPNAME" is-link class="cell2" :border-intent="false"
:arrow-direction="item.isLeft ? 'down' : 'left'" @click.native="getSoller(item.isLeft=!item.isLeft)">
</cell>
<div v-show="item.isLeft">
<cell-box :border-intent="false" class="sub-item" v-for="name in item.saleList" border-intent>
<span>{{name.USERNAME}}</span>
<select :id="name.USERCODE" @change='selectChange(name, name.USERCODE, item.USERCODE)'>
<option value="0" :selected="name.STATUS==0?'selected':''">上班</option>
<option value="1" :selected="name.STATUS==1?'selected':''">停岗</option>
<option value="2" :selected="name.STATUS==2?'selected':''">外勤</option>
<option value="3" :selected="name.STATUS==3?'selected':''">休假</option>
</select>
</cell-box>
</div>
</div>

selectChange(name, val, groupid) {
var params = {
projId: this.$store.state.core.loginInfo.projId,
userCode: name.USERCODE,
userStatus: $('#'+val+' option:selected').val()
}
var _this = this
this.$http.post(this.HOST + '/online/attendanceSetting.do', params, {
emulateJSON: true
})
.then(function(data) {
if (data.body.success==true) {
_this.$vux.toast.show({ text: data.body.data, type: 'text', width: '200px',time: 3000, })
_this.changeListData(groupid, params.userCode, params.userStatus);
_this.$nextTick(() => {
try {
_this.$refs.scroller.reset()
} catch(e) {
9a17
}
})
}
}, function(err) {
console.log("err", JSON.stringify(err));
});
},

// 改变数据源，重新渲染数据的时候就不会复原
changeListData(groupid, userCode, userStatus) {
this.dataList.data.forEach((qq) => {
if (qq.USERCODE==groupid) {
for (var i = 0; i < qq.saleList.length; i++) {
if (qq.saleList[i].USERCODE==userCode) {
qq.saleList[i].STATUS = userStatus
}
}
}
})
},

其实，在这个示例里，对于这种问题还可以考虑用组件的方式来解决（即将for循环的对象写成组件，就不必去取什么id了，这个是题外话了，额。。），但是这句话跟本博客没关系，只是针对这个示例。额。。。。。