Cara menggunakan editor JSON dalam VUE3

1. Lihat rendering dahulu Anda boleh memilih untuk memaparkan kesannya sendiri

2. Mula-mula, perkenalkan Plug-in pihak ketiga

npm install json-editor-vue3

yarn add json-editor-vue3

3 Perkenalkannya ke dalam projek

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

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

4 Secara amnya, bahagian belakang mengembalikan JSON ke dalam bentuk String

Ini juga cara kami menghantarnya ke bahagian belakang. Dalam borang ini, anda boleh menukar antara JSON dan String melalui data yang diperolehi daripada bahagian belakang

// 后端拿到的数据
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格式的了，直接传给后端

Contoh:

<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

参数	类型	描述	默认
modelValue	Object	要编辑的json值
options	Object	jsoneditor的options，参考configuration-options
currentMode	String	当前编辑模式	code
modeList	Array	可选的编辑模式列表	[“tree”, “code”, “form”, “text”, “view”]
language	Array	语言	en

7 , acara

Atas ialah kandungan terperinci Cara menggunakan editor JSON dalam VUE3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!