VueJS - 从本地 json 文件读取数据到 vis.js 时间轴

Question

我的问题是关于读取本地 JSON 文件。我正在创建一个 VueJS 应用程序。我正在尝试像这样将 json 文件中的数据加载到 Vue 组件中，

<script> 
 
  var container = {};
  
  var items = {};
  var options = {};
  var timeline = {};

  export default {
    
    mounted() {
      
      // DOM element where the Timeline will be attached
      container = document.getElementById('mynetwork');

      // Configuration for the Timeline
      options = {
        width: '100%',
        height: '200px',
        showTooltips: true
      };

      // initialize your network!
      timeline = new vis.Timeline(container, items, options);

      timeline.on('select', function(properties){
        
        console.log(properties);

        var itemNo = properties.items[0];

        switch(itemNo){
          case 1:
            window.open('./../../../generalcheckup1.html');
            break;
          case 2:
            window.open('./../../../scan1.html');
            break;
          case 3:
            window.open('./../../../surgery1.html');
            break;
          case 4:
            window.open('./../../../generalcheckup2.html');
            break;
          case 5:
            window.open('./../../../scan2.html');
            break;
          case 6:
            window.open('./../../../generalcheckup3.html');
            break;
          default:
            console.log('Item out of focus');
        }

      });
      
    },

    data(){
      return{
        
      }
    },

    created: function(){
        $.getJSON('http://localhost:8080/#/timeline.json',function(json){
          console.log('Entered inside');
          this.items = new vis.DataSet([json]);
          console.log(json);
        });
    },

    methods:{
     
    }
  }

</script>

我有一个小 JSON 文件 timeline.json，它位于我的文件夹中，如下所示，

{
  "id": 1,
  "content": "General Checkup",
  "start": "2017-01-20",
  "title": "General check-up"
}

当我尝试加载脚本时，控件似乎没有进入 $.getJSON 函数。控制台上没有错误。我做错了什么？

Answer 1

我认为问题出在您的 URL 文件 Json 上。尝试将 Json 文件放在 static 文件夹中。如果不存在，请创建一个。它应该与 src 文件夹的级别相同。然后将 Json 文件放在该文件夹中。完成上述建议后，使用 URL 如下所示：

$.getJSON('static/timeline.json', function .......

Answer 2

您可以使用导入简单地读取静态 JSON 文件。然后在数据中赋值。

import Timeline from '../data/timeline.json';
export default {
    data() {
        return {
            Timeline
        }
    }
}

Answer 3

如果有很多文件，您还可以动态加载 json 个文件。在你的 vue 中加载太多的 import 语句会使浏览器陷入困境，如果你有太多的话 json。因此，您也可以单独动态加载 json 个文件。

只需创建一个方法并设置一个等于 json 资源的变量。当用户需要资源时触发该方法。

methods: {
  getJsonFile (index) {
  this.currentJsonFile = require('./assets/' + index + '.json')
}

JSON 将被自动解析。

VueJS - 从本地 json 文件读取数据到 vis.js 时间轴

VueJS - Reading data from local json file into vis.js timeline

html

javascript

jquery

vis.js

vuejs2