一、从localstorage中读取数据
先将表格数据存储到localstorage中,每次修改数据后点击确认刷新存储
1. 在确认按钮上绑定submit()方法
@click="submit()"
2. 将需要存储的数组转化为JSON字符串存入localstorage
submit() {
window.localStorage.setItem('eventTable', JSON.stringify(this.eventTableData)); window.localStorage.setItem('timeSta', JSON.stringify(this.timeStatics));
}
3. 在浏览器中打开控制台检查localstorage
4. 在created()方法中,即初始化时读取localstorage内的数据赋值给变量
this.eventTableData = JSON.parse(window.localStorage.getItem("eventTable"));
this.timeStatics = JSON.parse(window.localStorage.getItem("timeSta"));
二、从JSON文件中读取数据
1. 安装vue-resource
npm install vue-resource
2. 编辑index.js导入vue-resource
import VueResource from 'vue-resource'Vue.use(VueResource);
3. 在created()方法中添加get方法
this.$http.get('../static/eventData.json').then((res) => {
this.eventTableData = res.body.list;
this.timeStatics = res.body.static;
});