Vue js Bereit-Funktion wird nicht ausgelöst

Question

Ich habe diese Vue-Funktion, wo es im Grunde zwei Methoden gibt. Die erste postStatus wird verwendet, um einen Post zu speichern, unmittelbar nachdem der Benutzer auf die Schaltfläche zum Speichern geklickt hat, und der andere getPosts wird verwendet, um alle früheren Posts dieses Benutzers aus der Datenbank abzurufen. Hier

ist die vue.js, wo es einen Ajax-Aufruf an einen Controller (in Laravel 5,3)

$(document).ready(function() { 

    var csrf_token = $('meta[name="csrf-token"]').attr('content'); 
    /*Event handling within vue*/ 
    //when we actually submit the form, we want to catch the action 
    new Vue({ 
     el  : '#timeline', 
     data : { 
      post : '', 
      posts : [], 
      token : csrf_token, 
      limit : 20, 
     }, 
     methods : { 
      postStatus : function (e) { 
       e.preventDefault(); 
       //console.log('Posted: '+this.post+ '. Token: '+this.token); 
       var request = $.ajax({ 
        url   : '/posts', 
        method  : "POST", 
        dataType : 'json', 
        data  : { 
         'body' : this.post, 
         '_token': this.token, 
        } 
       }).done(function (data) { 
        //console.log('Data saved successfully. Response: '+data); 
        this.post = ''; 
        this.posts.unshift(data); //Push it to the top of the array and pass the data that we get back 
       }.bind(this));/*http://stackoverflow.com/a/26479602/1883256 and http://stackoverflow.com/a/39945594/1883256 */ 

       /*request.done(function(msg) { 
        console.log('The tweet has been saved: '+msg+'. Outside ...'); 
        //$("#log").html(msg); 
       });*/ 

       request.fail(function(jqXHR, textStatus) { 
        console.log("Request failed: " + textStatus); 
       }); 
      }, 
      getPosts : function() { 
       //Ajax request to retrieve all posts 
       $.ajax({ 
        url   : '/posts', 
        method  : "GET", 
        dataType : 'json', 
        data  : { 
         limit : this.limit, 
        } 

       }).done(function (data) { 
        this.posts = data.posts; 
       }.bind(this)); 

      } 
     }, 
     //the following will be run when everything is booted up 
     ready : function() { 
      console.log('Attempting to get the previous posts ...'); 
      this.getPosts(); 
     } 
    }); 

}); 

Bisher ist die erste Methode postStatus funktioniert gut.

Der zweite soll direkt bei der Ready-Funktion angerufen oder abgefeuert werden, es passiert jedoch nichts. Ich bekomme nicht einmal die console.log Nachricht Attempting to get the previous posts .... Es scheint, dass es nie gefeuert wurde.

Was ist das Problem? Wie repariere ich es?

Anmerkungen: Ich bin mit jQuery 3.1.1, 2.0.1 Vue.js

Answer 1

Ich sehe, dass Sie 2.0.1 Vue verwenden. Es gibt keine ready Methode in Vue 2.0 und höher.

Hier ist der Link aller Vue 2.0 Änderungen der Liste hinzu: https://github.com/vuejs/vue/issues/2873

Wie oben auf der Seite erwähnt, können Sie mounted statt ready verwenden.

Kein Problem, aber nur eine Anmerkung: Sie mischen jQuery und Vue ausgiebig. Wenn Sie jQuery nur für http bezogene Funktionen benötigen, können Sie stattdessen vue-resource verwenden - https://github.com/vuejs/vue-resource

EDIT: Update auf vue-resource

Wie von @EmileBergeron in den Kommentaren wurde vue-Ressource im Ruhestand zurück in November 2016 selbst (einige Wochen nachdem ich diese Antwort mit dem letzten Absatz auf vue-resource zur Verfügung gestellt habe). Hier gibt es mehr Informationen auf dem gleichen:

https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

Answer 2

@ Mani Vorschlag der Verwendung von mounted(){} Arbeiten an der Komponente, die nicht versteckt. Wenn Sie eine Funktion in der Komponente ausführen möchten, wenn sie sichtbar ist und unter Bedingungen wie v-if="" oder v-show="" ausgeblendet wird, verwenden Sie updated(){}.