vue中的JsonEditor组件没有显示

Question

我在显示我的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: ""
      },
   }
  },

我遗漏了什么？运行时没有错误。我正在从后端检索信息，以显示一些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

Answer 1

来回答您的问题，为什么不使用第一种方法导入组件。这是因为作者决定把它变成一个插件，而不是一个重要的组件。(请参见插件上的Vue docs )。

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

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

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

new Vue({

  components: {
    JsonEditor
  }
    
}

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

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

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