AJAX und Vue.js 2 funktioniert nicht

Question

Ich versuche, AJAX zu verwenden, um mit Vue.js 2:

let remoteUrl = '...................'; 

var app = new Vue({ 
    el: '#app', 
    data: { 
     items: [] 
    }, 
    created: function() { 
     this.getFilms(); 
    }, 
    methods: { 
     getFilms: function() { 
      $.ajax({ 
       type: "GET", 
       url: remoteUrl 
      }).done(function (res) { 
       console.log(res); 
       self.items = res; 
      }).fail(function (err) { 
       alert("ERRORE: " + err); 
      }); 
     } 
    } 

});

dies ist der html:

  <table> 
       <tbody> 
        <tr v-for="item in items"> 
         <td>{{item.nome}}</td> 
         <td>{{item.data}}</td> 
         <td>{{item.size}}</td> 
         <td>{{item.ext}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

i die Ausgabe in der Konsole zu sehen. Aber der Tisch bleibt leer. Ich sehe keine Fehler im AJAX-Anruf. habe ich sowohl mit erstellt als auch mit montiert versucht. warum?

Answer 1

Sie müssen nur let self = {} unter Ihrer remoteUrl Deklaration hinzufügen, außer Sie haben bereits self woanders deklariert.

Dies sollte das Problem beheben (wenn nome, data, size und ext Eigenschaften Ihrer res waren, das ist).

Answer 2

Ich verstehe nicht, warum es notwendig ist, jQuery zusammen mit Vue zu verwenden. Wenn Sie Vue verwenden, schreiben Sie einfach in Vue. Wenn Sie mit NG2/1, dann schreiben Sie einfach in NG2/1.x

Dies ist eine große Realität, und ich hasse es zu allen JQuery Jungs zu brechen: - Wie NG5 und bis Mitte 2018 denke ich NG9 wird kommen, niemand wird in jQuery Code schreiben; es wird entweder nur jQuery -OR- eckig allein -oder- Vue.js allein sein.

In der Zwischenzeit können Sie alle jquery Leute weiterhin ein hotchpotch von jquery + ng oder jquery + Vue machen, aber das ist definitiv nicht zu empfehlen.

Ich würde empfehlen, moveon von jquery, nur um relevant zu bleiben. Dieser Diskussion folgen: Vue.js and jQuery?

Jquery: nehmen Sie es hinter der Scheune und schießen Sie es. Je schneller Sie eine schlechte Idee beenden, desto schneller können Sie eine andere Idee starten, die vielversprechender zeigt.

Answer 3

ok, ich ersetzt jquery mit vue-resource. Jetzt funktioniert alles, danke !!

let remoteUrl = '..............'; 

var app = new Vue({ 
    el: '#app', 
    data: { 
     items: [] 
    }, 
    created: function() { 
     this.getFilms(); 
    }, 
    methods: { 
     getFilms: function() { 
      this.$http.get(remoteUrl).then(response => { 
       this.items = response.body; 
      }, response => { 
       alert(response); 
      }); 
     } 
    } 
});