Vue JS - Помещение Json на данные

Question

Я хочу поместить мои данные json в данные Vue и дисплей, почему я не могу работать?

compiled: function(){ 
     var self = this; 
     console.log('teste'); 

     $.ajax({ 
      url: 'js/fake-ws.json', 
      complete: function (data) { 
       self.$data.musics = data 
       console.log(self.$data.musics); 
      } 
     }) 
    } 

<div id="playlist" class="panel panel-default"> 
       <div class="panel-body"> 
        <ul> 
         <li 
          v-repeat="musics.item" 
         > 
          <a href="">{{nome}}</a> 
         </li> 
        <ul> 
       </div> 
     </div> 

Я не могу заставить код работать .. почему?

Answer 1

Я думаю, что проблема заключается в том, что musics не является частью ваших данных Vue, поэтому, когда вы устанавливаете его значение с помощью self.$data.musics = data, Vue не знает, что ему нужно его посмотреть. Вместо этого вы должны использовать $add метод, как это: self.$set("musics", data);

Из Руководства VueJs:

В ECMAScript 5 нет никакого способа определить, когда новое свойство добавляется к объекту, или когда свойство удаляется из объекта. Чтобы справиться с этим, наблюдаемые объекты будут дополнены двумя способами: $ add (ключ, значение) и $ delete (ключ). Эти методы могут использоваться для добавления/удаления свойств из наблюдаемых объектов при запуске нужных Просмотр обновлений.

Answer 2

this относится ко всему объекту Вью, поэтому musics объект уже доступен через this.musics. Дополнительная информация here в справочной системе VueJS API и here в руководстве VueJS и т. Д. thishere.

Имея это в виду, код должен выглядеть примерно так:

var playlist = new Vue({ 

el: '#playlist', 

data:{ 
    musics: '', 
} 

methods: { 
    compiled: function(){ 
     var self = this; 
     console.log('test'); 

     $.ajax({ 
     url: 'js/fake-ws.json', 
     complete: function (data) { 
      self.musics = data 
      console.log(self.musics); 
     } 
     }) 
    } 
} 

И вид будет что-то вроде этого:

<div id="playlist" class="panel panel-default"> 
      <div class="panel-body"> 
       <ul> 
        <li v-repeat="musics"> 
         <a href="">{{nome}}</a> 
        </li> 
       <ul> 
      </div> 
    </div> 

Также обратите внимание на код this example.

Answer 3

вы можете сделать это с помощью vue-resource. Включите vue-resource.js в ваше приложение или html-файл и:

{ 
    // GET /someUrl 
    this.$http.get('/someUrl').then(response => { 

    // get body data 
    this.someData = response.body; 

    }, response => { 
    // error callback 
    }); 
}