VueJS - 로컬 json 파일에서 vis.js 타임라인으로 데이터 읽기

VueJS - 로컬 json 파일에서 vis.js 타임라인으로 데이터 읽기

제 질문은 로컬 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기능.콘솔에 에러는 없다.내가 뭘 잘못하고 있지?

Import를 사용하면 정적 JSON 파일을 읽을 수 있습니다.그런 다음 데이터를 할당합니다.

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

json 파일이 많은 경우 동적으로 로드할 수도 있습니다.vue에 Import 문을 너무 많이 로드하면 브라우저가 중단되거나 json이 너무 많으면 브라우저가 크래시됩니다.따라서 개별적으로 json 파일을 동적으로 로드할 수도 있습니다.

메서드를 만들고 json 리소스와 동일한 변수를 설정하십시오.사용자가 리소스를 필요로 할 때 메서드를 트리거합니다.

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

JSON은 자동으로 해석됩니다.

Json 파일의 URL이 문제인 것 같습니다.Json 파일을 에 배치해 보겠습니다.static폴더입니다.존재하지 않는 경우 작성합니다.이 값은 다음 레벨과 같아야 합니다.src폴더입니다.그런 다음 Json 파일을 폴더에 넣습니다.위의 권장사항을 수행한 후 다음과 같이 URL을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/45425448/vuejs-reading-data-from-local-json-file-into-vis-js-timeline