在我的上一篇文章使用solidity与web3创作一个在线小游戏之五:VUE中的嵌套table,动态数据绑定,slot插槽与slot-scope_lixiaodog的博客-CSDN博客
中我们使用了VUE中基础的几个特性,在本章中我们会深入了解VUE。当我们创建了一个room模板之后,我们接下来就可以创建真正的房间了。在view文件夹下新建一个文件DeskList.vue,关键代码如下:
<template>
<div class="home-container">
<Header />
<div class="content clearfix">
<div class="list">
<h2>桌子列表</h2>
</div>
<Table
:loading="loading"
border
:columns="columns"
:data="tableData"
>
<template
slot-scope="{row, index}"
slot="action"
>
<Button
style="margin-right: 10px"
@click="refresh(row, index)"
>刷新详情</Button>
</template>
<template
slot-scope="{row, index}"
slot="action2"
>
<Button
style="margin-right: 10px"
@click="userSitDown(row)"
>进入游戏</Button>
</template>
</Table>
<Page
class-name="pagination"
show-total
:total="total"
@on-change="handleCurrentChange"
:page-size="pageSize"
:current="pageNo"
v-if="!loading && total > 0"
/>
</div>
<Footer />
<room :roomInfo="roomInfo"></room>
</div>
在data()里添加一个数据deskinfos: [],以此变量来存储我们的桌子列表。在 methods:里添加一个函数:
getDeskList() {
this.loading = true;
let params = {
pageNo: this.pageNo,
pageSize: this.pageSize,
status: this.status
};
let self = this;
let gameObjArray = [];
myWeb3.instances.GameManage.getAllDesk(111)
.then(res => {
console.log("getDeskList===", res);
this.loading = false;
if (res.length > 0) {
for (let i = 0; i < res.length; i++) {
let gameobj = Object.assign({}, res[i]);
this.tableData.push(gameobj);
this.getTokenSymbol(gameobj, i);
//})
}
} else {
this.tableData = [];
this.total = 0;
}
})
在我们的表头里有一项:
在这一列里我们将显示我们桌子所支持的ERC20TOKEN的名称,我们的合约并没有保存这个数据,需要VUE拿到数据后,调用ERC20的标准接口去获取token.symbol()。我们添加一个获取这个symbol的函数。
getTokenSymbol(row, index) {
let self = this;
myWeb3.instances.TutorialToken.symbol().then(function(res) {
Vue.set(self.tableData[index], "tokenSymbol", res);
});
myWeb3.web3.eth.getBalance(row.addr).then(function(res) {
Vue.set(self.tableData[index], "bonus", myWeb3.web3.utils.fromWei(res))
});
},
此时如果使用:self.tableData[index].tokenSymbol=res;是无法使用页面得到更新的。那是为什么呢?在VUE里,所有的视图自动更新都是基于响应式数据的。在我们self.tableData[index].tokenSymbol时,VUE并没有为 我们在底层,添加tokenSymbolp 个字段的响应系统(这个响应系统 一般在编译时就把对象的所有静态属性遍历后,添加完成,相应的包装类已经全部生成),所以我们动态添加的属性VUE是监控不到的,为了解决这个问题,VUE提供了
Vue.set(obj, key, value),这个函数,这个函数调用后,VUE会把所有应该加上的响应系统全部建立好,之后就可以追踪这个属性的变化了,这时可能会问,在上一章中和我们直接添加的数组为什么能够自动响应呢?事实上使用某些方法操作数组,变动数据时,有些方法可以被vue可以监测
push(),pop(),shift(),unshift(),splice(),sort(),reverse(),而filter(), concat(), slice(),这些不会改变原始数组,但总是返回一个新数组。事实上,以下种情况,VUE无法监测:
1、当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
2、当你修改数组的长度时,例如: vm.items.length = newLength
大家明白了响应式数据,接下来我们继续,把其它相应函数的代码完善。测试就可以看到如下界面;
在本章中我们理解了什么是响应式数据,事实上VUE为所有的DATA数据和属性提供了响应系统,响应系统与渲染器,编译器是整个VUE的核心。在本系列文章完成后,会有一个系列文章,从响应系统的原理出发,创建一个简单的响应系统原型。在下一章中,我们将与单组件交互,实现父组件与子组件的数据与事件交互。