VueJS - 從本地json文件讀取數據到vis.js時間線

我的問題是關於從本地JSON文件讀取。我正在創建一個VueJS應用程序。我想從一個JSON文件加載數據到這樣的Vue的組件，VueJS - 從本地json文件讀取數據到vis.js時間線

<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功能。控制檯上沒有錯誤。我在做什麼錯？

來源

2017-07-31 APJ

它應該是'getJSON'還是'get'？ – Pradeepb

@Pradeepb它應該是getJSON，因爲它是一個jQuery方法 – APJ

好的感謝您的澄清。我問，因爲我看到[this]（https://forum.vuejs.org/t/error-with-get-json-api-call/9734）和[this]（https://stackoverflow.com/問題/ 44148438/vuejs-2-passing-data-from-json） – Pradeepb

我相信問題出在您的Json文件的URL上。嘗試將Json文件放入static文件夾中。創建一個，如果它不存在。它應該與src文件夾的級別相同。然後放置Json文件的文件夾。完成以上建議後，請使用如下所示的URL：

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

來源

2017-07-31 22:42:08 Pradeepb

您可以簡單地使用導入來讀取靜態JSON文件。然後分配數據。

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

來源

2017-12-24 06:29:03

VueJS - 從本地json文件讀取數據到vis.js時間線

回答

相關問題