vue 读取本地代码:static目录下的json文件,并加载显示页面上
程序员文章站
2022-05-19 17:05:01
...
先上效果图:
从效果图可以看出是点击:button 打开json文件按钮的方法:
html:<Button type="primary" @click="open_changeFile">打开json文件</Button>
调用的方法是:
open_changeFile(){
}
正确写法:
前提vue里面引入了axios了:
引入方法:
import axios from 'axios'
// 打开本地json文件,预览页面
open_changeFile(){
//用axios的方法引入地址
this.$axios.get('http://tcc:1000/static/fileJson/save.json').then((res) => {
console.log(res);
if(res.status == "200"){
// 赋值显示在页面
this.fileData = JSON.parse(JSON.stringify(res.data));
console.log("this.fileData:",this.fileData);
this.connectors = this.fileData.connectors;
this.nodes = this.fileData.nodes;
}
})
},
上一篇: 有关即时通讯MQTT 的使用
下一篇: Vue中render函数使用