VueJS - ローカルjsonファイルからvis.jsタイムラインにデータを読み込む

Question

私の質問は、ローカルのJSONファイルからの読み上げについてです。私はVueJSアプリケーションを作成しています。私は、私はこのようになります私のフォルダに存在する小さなJSONファイル、timeline.jsonを、持っている

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

、このようなVueのコンポーネントにJSONファイルからデータをロードしようとしています

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

スクリプトをロードしようとすると、コントロールが$ .getJSON関数に入っていないようです。コンソールにエラーはありません。私は何をしていますか？

Answer 1

私はこの問題があなたのJsonファイルのURLにあると考えています。 Jsonファイルをstaticフォルダに配置してみてください。それが存在しない場合は作成します。それはsrcのレベルと同じでなければなりません。次に、そのフォルダにJsonファイルを配置します。上記の提案を行った後、次のURLを使用してください：

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

Answer 2

インポートを使用して静的なJSONファイルを読むことができます。次にデータを割り当てます。

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