vue 中的 JsonEditor 组件未显示

Question

I am having trouble showing my JsonEditor component. This is the code that i am working with:

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

What am i missing? There is no errors when running. I am retrieving information from my backend to display some JSON information.

*The component has worked before, after som changes in design it stopped working *Yes, i have checked if the data i am retrieving to display is correct and exists

Update

I made it work again but i would still love to know why my first attempt is not working?

This works:

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

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

 },

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

Update 2, Link to JsonEditor

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

Answer 1

To answer your question on why it's not importing the component with your first approach. That's because the author decided to make it a plugin instead of importable component. (See Vue docs on plugin ).

Such that when you do import on this component, it may be imported but never rendered since it's written without exporting the default module.

If you need to register this component by the import keyword, you could specify the complete path to the component file itself.

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

new Vue({

  components: {
    JsonEditor
  }
    
}

And that should give you the same effect.

---

BTW, a quick tip for you:

When defining a component with PascalCase, you can use either case when referencing its custom element. That means both <my-component-name> and <MyComponentName> are acceptable.

So in your case, since you seem to want to have the components in kebab-case, you could drop the component "alias" name from the components object.

import VueJsonCompare from 'vue-json-compare';

components: {
  VueJsonCompare
}

// ...

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