网页设计网站,阿里云上的网站建设,东莞有哪些好企业,淘宝在线官网进入背景
最近在进行vue2项目升级为vue3。 在项目中需要获取json某些字段的路径#xff0c;vue2中使用JSONPathPicker #xff0c;但是该插件不支持vue3#xff0c;vue3中也没有相应的模块有该功能。
实现目标#xff1a;
原vue2中JSONPathPicker实现的功能#xff1a;
查…背景
最近在进行vue2项目升级为vue3。 在项目中需要获取json某些字段的路径vue2中使用JSONPathPicker 但是该插件不支持vue3vue3中也没有相应的模块有该功能。
实现目标
原vue2中JSONPathPicker实现的功能
查找候选插件 json-tree-view-vue3 git仓库地址 官方文档中说可以通过selected事件获取相应的路径 测试代码templatediv classdemoJsonTreeView :jsonjson v-on:selecteds //div
/templatescript
/* eslint-disable */
import { JsonTreeView } from json-tree-view-vue3;
import json-tree-view-vue3/dist/style.css
const ss {string:text,number:123,boolean:true,null:null,array:[A,B,C],object:{prop1:value1,nestedObject:{prop2:value2}}}export default {name : demo,components:{JsonTreeView:JsonTreeView,},data () {return {json:ss};},methods:{s(a) {console.log(a )console.log(Object.keys(a) )console.log(a.path )console.log(typeof(a))},}
}
/scriptstyle scoped/style 测试效果 注意事项 可以直接将字符串传至改组件只能获取最底层字段的路径 测试结论不能满足当前需求 vue-json-pretty git仓库地址 官方文档说该组件可以监听节点点击事件先试下 测试代码 templatediv classdemovue-json-pretty :datajson rootPath$ :selectOnClickNodetrue :editabletrue:highlightSelectedNodetrue v-on:nodeClicks //div
/templatescript
/* eslint-disable */
import VueJsonPretty from vue-json-pretty;
const ss JSON.parse({string:text,number:123,boolean:true,null:null,array:[A,B,C],object:{prop1:value1,nestedObject:{prop2:value2}}});export default {name : demo,components:{vue-json-pretty:VueJsonPretty},data(){return {json : ss}},methods:{s(a) {console.log(a )console.log(Object.keys(a) )console.log(a.path )console.log(typeof(a))}}
}
/scriptstyle scoped/style测试效果 使用注意事项 插件传入的数据需要是json对象需要指定根路径为$如果需要编辑内容设置参数editable为True 测试结论满足当前需求 最终的实现的替换效果
