So verwenden Sie den JSON-Editor in VUE3

1. Schauen Sie sich zuerst die Renderings an.

2 Dies ist der JSON-Editor, den ich im vue3-Projekt verwende

npm install json-editor-vue3

yarn add json-editor-vue3

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

<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>

Beziehen Sie sich auf die entsprechenden Parameter der Konfigurationsoptionen, den ersten Parameter ist das Beispiel des Editors, die nachfolgenden Parameter sind die gleichen wie die offiziellen Parameter.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den JSON-Editor in VUE3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!