Vueはjsonデータ、vue-json-viewerの使用を表示します

1.インストール

 yarn add vue-json-viewer

2.プロジェクトを紹介します

srcディレクトリのプラグインの下にあるjsonViewer.jsファイル

import Vue from "vue";
import JsonViewer from "vue-json-viewer";
Vue.use(JsonViewer);

で紹介されたmain.jsドキュメントで

import "./plugins/jsonViewer.js";

3、コンポーネントでの使用

test.vue文件

<template>
  <div class="test-json-viewer">
    <json-viewer
      :value="jsonData"
      :expand-depth="5"
      copyable
      boxed
      sort
    ></json-viewer>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      jsonData: [
        {
    
    
          AGE: 22,
          BIRTHDAY: "1999-12-26",
          GENDER: 1
        },
        {
    
    
          AGE: 21,
          BIRTHDAY: "2000-12-6",
          GENDER: 2
        }
      ]
    };
  }
};
</script>

効果は次のとおりです。

その他の使用法については、vue-json-viewerを参照してください。