Javascript vue中的JsonEditor组件未显示

我在显示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'

import{getConfig,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: ""
      },
   }
  },

{{info.message}
欢迎来到scope360管理员区。编辑scope360配置的位置
{{switchButtonMessage}}
预览更改
拯救
取消
从“vue编辑json”导入JsonEditor
从“vue json比较”导入vueJsonCompare
从“./utils/network”导入{getConfig，updateConfig}；
导出默认值{
组成部分：{
“vue json比较”：VUEJSON比较，
“json编辑器”：JsonEditor
},
数据：函数（）{
返回{
原始配置：{}，
editedConfig:{}，
showJsonEditor:true，
SwitchButton消息：“纯文本”，
信息：{
showarert:false，
alertType:“成功”，
信息：“
},
}
},

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

*组件以前工作过，在som更改设计后停止工作 *是的，我已经检查了要显示的检索数据是否正确且存在

更新

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

这项工作：

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

  components: {
   'vue-json-compare' : vueJsonCompare

 },

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

从“Vue”导入Vue
Vue.use（JsonEditor）
组成部分：{
“vue json比较”：VUEJSON比较
},
//HTML

更新2，链接到JsonEditor

---

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

这样，当您在此组件上执行

import

操作时，它可能会被导入，但不会被渲染，因为它是在未导出

default

模块的情况下编写的

如果需要通过

import

关键字注册此组件，可以指定组件文件本身的完整路径

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

new Vue({

  components: {
    JsonEditor
  }

}

这会给你同样的效果

---

顺便说一句，给你一个简短的提示：

使用PascalCase定义组件时，您可以在引用其自定义元素时使用任意一种情况。这意味着

和

都是可以接受的

因此，在您的示例中，由于您似乎希望将组件放在烤肉串中，因此可以从

组件

对象中删除组件“别名”

import VueJsonCompare from 'vue-json-compare';

components: {
  VueJsonCompare
}

// ...

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

从“vue json比较”导入VueJSON比较；
组成部分：{
VueJsonCompare
}
// ...

Hi，是不是

vue-json-compare

工作不正常？Hi，不是说JsonEditor@JeremyWaltersHard。你能链接你使用的库吗（JsonEditor）。如果你能让它在jsfiddle上工作，这也会有帮助。@JeremyWalters-link是upI。我看到模块的创建者也在“用法”中描述了这一点应使用

Vue完成的部分。使用
是否与该人员如何构建模块相关？