web-dev-qa-db-fra.com

Vue La fonction js Ready n'est pas déclenchée

J'ai cette fonction vue où il existe essentiellement deux méthodes. La première postStatus est utilisée pour enregistrer une publication juste après que l'utilisateur a cliqué sur le bouton Enregistrer, et l'autre getPosts est utilisé pour récupérer tous les messages précédents de cet utilisateur de la base de données.

Voici le vue.js, où il y a un appel ajax vers un contrôleur (dans 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();
        }
    });

});

Jusqu'à présent, la première méthode postStatus fonctionne bien.

Le second est censé être appelé ou tiré directement sur la fonction prête, mais rien ne se passe. Je ne reçois même pas le message console.log Attempting to get the previous posts .... Il semble qu'il n'a jamais été renvoyé.

Quelle est la solution? Comment je le répare?

Remarques: j'utilise jQuery 3.1.1, Vue.js 2.0.1

javascriptjqueryajaxvue.js
14
Pathros

Je vois que vous utilisez Vue 2.0.1. Il n'y a pas de méthode ready dans Vue 2.0 et supérieur).

Voici le lien vers la liste de tous les changements Vue 2.0: https://github.com/vuejs/vue/issues/287

Comme mentionné dans la page ci-dessus, vous pouvez utiliser mounted au lieu de ready.

Pas un problème, mais juste une note: vous mélangez jQuery et Vue de manière extensive. Si vous avez besoin de jQuery uniquement pour les fonctions liées à http, vous pouvez utiliser à la place vue-resource - https://github.com/vuejs/vue-resource

EDIT: mise à jour sur vue-resource

Comme l'a souligné @EmileBergeron dans les commentaires, vue-resource a été retiré en novembre 2016 lui-même (quelques semaines après avoir fourni cette réponse avec ce dernier paragraphe sur vue-resource). Voici plus d'informations sur le même:

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

50
Mani

La suggestion de @ Mani d'utiliser mounted(){} fonctionne sur le composant qui n'est pas caché. Si vous souhaitez exécuter une fonction dans le composant lorsqu'elle est visible et qui est masquée à l'aide de conditions telles que v-if="" Ou v-show="", Utilisez updated(){}.

9
Syed