How to use JSON editor in VUE3

1. Take a look at the renderings first. You can choose to display the effect yourself.

2. This is the JSON editor I use in the vue3 project. First, introduce a third party Plug-in

npm install json-editor-vue3

yarn add json-editor-vue3

3. Introduce it into the project

// 导入模块
import JsonEditorVue from 'json-editor-vue3'

// 注册组件
components: { JsonEditorVue },

4. Generally, the backend returns JSON into String form

This is also how we pass it to the backend. In this form, you can convert between JSON and String through the data obtained from the backend

// 后端拿到的数据
configValue："{\"isBigTree\":true,\"needContact\":true,\"needProvinceCity\":true,\"needDetailAddress\":true,\"needReservationCheckSms\":false,\"BigTreeReservationConfig\":{\"orderApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/order/create/notification/v001?sign=\",\"reservationApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/service/appointment/create/service/appointment/v001?sign=\",\"cancelApiUrl\":\"https://api.bigtreedev.com/openplatform/openApi/api/order/unsubscribe/notification/v001?sign=\",\"companyNo\":\"C400020\",\"verNo\":\"v001\",\"secretKey\":\"72CDFFD7F63D8662B6E1873FEA14EB24\",\"signSecretId\":\"0BBF774D11C0A053A6C2A2E36E6C6C2E2C55D483\"}}"
// 我们通过JSON.parse()进行转换
let isJson = JSON.parse(configValue) // 这样我们拿到的就是JSON格式的了，可以渲染出来的
// 我们传给后端的数据也要将JSON转成字符串，通过JSON.stringify()
let isString = JSON.stringify(configValue)  // 这样我们拿到的就是String格式的了，直接传给后端

5. Example:

<template>
  <div>
    <json-editor-vue
        v-model="jsonData"
        class="editor"
        :current-mode="currentMode"
    />
  </div>
</template>
 
<script>
  // 导入模块
  import JsonEditorVue from &#39;json-editor-vue3&#39;
 
  export default defineComponent({
    name: &#39;EnterpriseList&#39;,
    //  注册组件
    components: {
      JsonEditorVue,
    },
    setup() {
      const state = reactive({
        currentMode: &#39;tree&#39;
      })
      return {
        ...toRefs(state),
      }
    },
  })
  }
</script>

6. Parameters

##languageArraylanguageen

Parameters	Type	Description	Default
modelValue	Object	json value to be edited
options	Object	jsoneditor options, refer to configuration-options
currentMode	String	Current editing mode	code
modeList	Array	Optional edit mode list	[“tree”, “code”, “ form", "text", "view"]

7. Event

NameDescriptionupdate:modelValuejson updatechangejson updatetextSelectionChangeRefer to the corresponding parameters of configuration-options. The parameters are rewritten. The first parameter is the instance of the editor. The subsequent parameters are the same as the official parameters.selectionChange Refer to the corresponding parameters of configuration-options. The parameters are rewritten. The first parameter is the instance of the editor. The subsequent parameters are the same as the official parameters. focusReference Configuration-options corresponds to the parameters, and the parameters are rewritten. The first parameter is the instance of the editor, and the subsequent parameters are the same as the official parameters. blurRefer to configuration-options Corresponding parameters, parameters are rewritten, the first parameter is the instance of the editor, subsequent parameters are the same as the official parameterscolorPickerRefer to the corresponding parameters of configuration-options, The parameters have been rewritten. The first parameter is the instance of the editor, and the subsequent parameters are the same as the official parameters

The above is the detailed content of How to use JSON editor in VUE3. For more information, please follow other related articles on the PHP Chinese website!