当前位置：首页 > news >正文

vue3--实现vue2插件JSONPathPicker的路径获取功能

news 2025/8/3 5:32:18

背景

最近在进行vue2项目升级为vue3。
在项目中需要获取json某些字段的路径，vue2中使用JSONPathPicker ，但是该插件不支持vue3，vue3中也没有相应的模块有该功能。

实现目标：

原vue2中JSONPathPicker实现的功能：

查找候选插件

json-tree-view-vue3 git仓库地址
在这里插入图片描述 官方文档中，说可以通过selected事件，获取相应的路径：

测试代码：

<template><div class="demo"><JsonTreeView :json="json" v-on:selected="s" /></div>
</template><script>
/* 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))},}
}
</script><style scoped></style>

测试效果：
注意事项：
1. 可以直接将字符串传至改组件；
2. 只能获取最底层字段的路径，
测试结论：不能满足当前需求

vue-json-pretty git仓库地址
在这里插入图片描述 官方文档说该组件可以监听节点点击事件，先试下

测试代码：

<template><div class="demo"><vue-json-pretty :data="json" rootPath="$" :selectOnClickNode="true"  :editable="true":highlightSelectedNode="true" v-on:nodeClick="s" /></div>
</template><script>
/* 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))}}
}
</script><style scoped></style>