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信息。

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

更新

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

这有效：

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为您服务：

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

Vue中的JsonEditor组件未显示

1 个答案: