VueJS-чтение данных из локального файла json в vis.Яш сроки

Question

VueJS-чтение данных из локального файла json в vis.Яш сроки

Мой вопрос касается чтения из локального файла 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. На консоли нет никаких ошибок. Что я делаю не так?

1007 2

jQuery javascript html vis.js

2 ответов:

Comments

Ничего не найдено.

Pradeepb · Accepted Answer · 2017-08-01 01:42:08

Я полагаю, что проблема заключается в вашем URL-адресе для файла Json. Попробуйте поместить файл Json в папку static. Создайте его, если он не существует. Он должен быть таким же, как уровень папки src. Затем поместите файл Json в эту папку. После выполнения вышеуказанных предложений используйте URL-адрес, как показано ниже:
$.getJSON('static/timeline.json', function .......

Jakarea Parvez · Accepted Answer · 2017-12-24 08:29:03

Вы можете просто прочитать статический файл JSON с помощью импорта. Затем назначьте в данных.
import Timeline from '../data/timeline.json';
export default{
    data(){
        return {
            Timeline
            }
    },