vue 中的 JsonEditor 组件未显示

Posted 2023-02-23

【中文标题】vue 中的 JsonEditor 组件未显示

【英文标题】：JsonEditor component in vue is not showing

【发布时间】：2019-06-08 07:04:41

【问题描述】：

我无法显示我的 JsonEditor 组件。这是我正在使用的代码：

<template>
  <v-app>
  <div class="admin">

    <v-alert v-if="info.showAlert"
      value=true
      :type="info.alertType">
    info.message
    </v-alert>

    <h2>Welcome to scope360 admins area. A place to edit scope360 configurations</h2>
    <v-btn class="test" @click="switchEditClicked">switchButtonMessage</v-btn>
    <div class= "editorComponents">
      <div v-if="showJsonEditor" class="editor">
        <json-editor is-edit="true" v-model="editedConfig" ></json-editor>
        <v-btn @click="previewClicked">Preview Changes</v-btn>
      </div>
      <div v-if="!showJsonEditor" class="jsonDiff">
        <vue-json-compare :oldData="originalConfig" :newData="editedConfig"></vue-json-compare>
        <v-btn @click="saveClicked">Save</v-btn>
        <v-btn @click="cancelPreviewClicked">Cancel</v-btn>
      </div>
    </div>
  </div>
</v-app>
</template>

<script>

import JsonEditor from 'vue-edit-json'
import vueJsonCompare from 'vue-json-compare'

importgetConfig,updateConfig from "../utils/network";


export default

  components: 
   'vue-json-compare' : vueJsonCompare,
   'json-editor' : JsonEditor
 ,

  data: function () 
    return 
      originalConfig: ,
      editedConfig: ,
      showJsonEditor: true,
      switchButtonMessage: "plain text",
      info : 
        showAlert: false,
        alertType: "success",
        message: ""
      ,
   
  ,

我错过了什么？运行时没有错误。我正在从后端检索信息以显示一些 JSON 信息。

*该组件以前可以工作，但在设计发生一些更改后它停止工作 *是的，我已经检查了我要显示的数据是否正确且存在

更新

我让它再次工作，但我仍然想知道为什么我的第一次尝试不起作用？

这行得通：

import Vue from 'vue'
Vue.use(JsonEditor)

  components: 
   'vue-json-compare' : vueJsonCompare

 ,

//html
  <JsonEditor is-edit="true" v-model="editedConfig" ></JsonEditor>

更新 2，链接到 JsonEditor

https://www.npmjs.com/package/vue-edit-json

【问题讨论】：

嗨，vue-json-compare 工作不正常吗？

嗨，不，是 JsonEditor @JeremyWalters

很难说。你可以链接你使用的库（JsonEditor）。如果你可以让它在 jsfiddle 上工作，这也可能会有所帮助。

@JeremyWalters 链接已打开

我看到模块的创建者还在“使用”部分中描述了应该使用Vue.use来完成它与该人如何构建模块有关吗？

【参考方案1】：

回答您关于为什么不使用您的第一种方法导入组件的问题。那是因为作者决定将其设为plugin 而不是可导入组件。 （请参阅 plugin 上的 Vue 文档）。

这样当您在此组件上执行import 时，它可能会被导入但永远不会呈现，因为它是在没有导出default 模块的情况下编写的。

如果您需要通过import关键字注册该组件，您可以指定组件文件本身的完整路径。

import JsonEditor from "vue-edit-json/src/JsonEditor";

new Vue(

  components: 
    JsonEditor
  

这应该会给你同样的效果。

---

顺便说一句，给你一个快速的tip：

使用 PascalCase 定义组件时，您可以在引用其自定义元素时使用任何一种情况。这意味着<my-component-name> 和<MyComponentName> 都可以接受。

因此，在您的情况下，由于您似乎希望将组件放在 kebab-case 中，您可以从 components 对象中删除组件“别名”名称。

import VueJsonCompare from 'vue-json-compare';

components: 
  VueJsonCompare


// ...

<vue-json-compare :oldData="originalConfig" :newData="editedConfig"></vue-json-compare>