使用json-editor-vue3(Json字段编辑器)

import JsonEditorVue from 'json-editor-vue3'

<template>
    <button>点击我修改</button>
    <!-- modeList:可选的编辑模式列表 ["tree", "code", "form", "view"] -->
    <!-- currentMode:当前编辑模式(小写) -->
    <!-- v-model:绑定需要修改的值 -->
    <!-- update:modelValue:监听到修改的值发生变化 -->
    <JsonEditorVue v-model="jsonStr"
     :modeList="couldView"
     :currentMode="'tree'" 
     @update:modelValue="updateModelValue">
    </JsonEditorVue>

</template>


<script lang="ts" setup>
import { ref } from 'vue'

//1.导入json-editor-vue3
import JsonEditorVue from 'json-editor-vue3'

//2.定义修改的json字段的值,
const jsonStr = ref({ "key": "key", "value": "value" })


const couldView = ref(["tree", "code", "form", "view"])
const updateModelValue = (val: unknown) => {
    console.log(val,"修改了值");
}



</script>

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'

Vue.use(JsonEditorVue)

import JsonEditorVue from 'json-editor-vue3'

export default {
  name: 'app',
  components: {
    JsonEditorVue
  },
  data() {
    return {
      data: {
        "hello": "vue"
      }
    }
  },
  methods: {}
}

<json-editor-vue class="editor" v-model="data" />