vue-json-pretty的用法
vue-json-pretty是用来格式化展示json数据的
GitHub : vue-json-pretty的详细用法
用法
- npm下载
npm install vue-json-pretty --save
- 引入
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
- 注册组建
export default {
components: {
VueJsonPretty,
},
};
- 使用
<template>
<div>
//data可以是请求后端返回的数据
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" > </vue-json-pretty>
</div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import {
getData
} from "@/api/mongodb/index.js";
export default {
name : 'cluster',
components : {VueJsonPretty},
data(){
return{
data : {}
}
}
},
//例如下面的获取后端返回的json数据,并赋值
async getData(row){
let namespace = row.namespace;
let name = row.metaName;
const params = {
namespace,
name
};
const res = await getData(params); //getData是在引入的api中定义好的
this.json = res.content;
}
</script>
- 效果
json格式的数据高亮展示
- 报错信息
如果有报错的话,看你的项目用的vue的版本
如果你用的是vue2的话,就安装1.7.1的版本,即
npm install [email protected]