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

回答您为什么不使用您的第一种方法导入组件的问题。那是因为作者决定把它变成plugin而不是可导入的组件。 (请参阅 plugin 上的 Vue 文档)。

这样当你做 import在此组件上，它可能被导入但从未呈现，因为它是在没有导出 default 的情况下编写的模块。

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

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

new Vue({

  components: {
    JsonEditor
  }
    
}

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

---

顺便说一句，快速 tip给你:

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.

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

import VueJsonCompare from 'vue-json-compare';

components: {
  VueJsonCompare
}

// ...

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