A função Vue js Ready não é acionada
Eu tenho essa função vue, onde existem basicamente dois métodos. O primeiropostStatus
é usado para salvar uma postagem logo após o usuário clicar no botão Salvar e a outragetPosts
é usado para recuperar todas as postagens anteriores desse usuário do banco de dados.
Aqui está o vue.js, onde há uma chamada ajax para um controlador (no 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();
}
});
});
Até agora, o primeiro métodopostStatus
está funcionando bem.
O segundo deve ser chamado ou acionado diretamente na função ready, no entanto, nada acontece. Eu nem recebo a mensagem console.logAttempting to get the previous posts ...
. Parece que nunca foi demitido.
Qual é o problema? Como faço para corrigir isso?
Notas: Estou usando o jQuery 3.1.1, Vue.js 2.0.1