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

背景

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

实现目标：

原vue2中JSONPathPicker实现的功能：

查找候选插件

1. 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
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37

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

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>
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41

   • 测试效果
     

   • 使用注意事项：

     1. 插件传入的数据需要是json对象
     2. 需要指定根路径为$
     3. 如果需要编辑内容，设置参数editable为True

   • 测试结论：满足当前需求

   最终的实现的替换效果：