here is my app.js looks like
const app = new Vue({
el: '#app',
data: {
msg: 'Update new Post:',
content:'',
posts:[],
},
ready:function(){
this.created();
},
created(){
axios.get('http://{mydomain}/home/post')
.then(response=>{
console.log(response);//show if success
this.posts=respoonse.data;// putting posts into array
})
.catch(function (error) {
console.log(error.response);
});
},
my view page looks like
#{{posts}}
and my controller looks like
public function getPost(){
$posts_json = DB::table('posts')
->leftJoin('users','users.id','posts.user_id')
->leftJoin('profiles','profiles.user_id','posts.user_id')
->get();
return $posts_json;
}
its showing nothing in the array but data showing in console
{data: Array(9), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
Related
i am able to see all the data after posting data, liking post , commenting on post without page refresh but after using infinite scroll in vuejs, infinite scroll working perfectly fine but not able to see post after liking ,commenting , posting..i have to refresh every time to see the comment/like on post. How can i see ontime like without page refresh ?Please help me figure this out anyone
el: '#app',
data() {
return {
posts: [ ],
page: 1,
};
},
created(){
this.allposts();
},
}
methods:{
Before using infinite scroll on app.js
allposts(){
axios.get('http://localhost/project/posts')
.then((response) => {
this.posts = response.data;
Vue.filter('myOwnTime', function(value){
return moment(value).fromNow();
});
})
.catch(() => {
console.log('handle server error from here');
});
},
After using vue infinite scroll
https://peachscript.github.io/vue-infinite-loading/guide/start-with-hn.html
allpost($state) {
axios.get('http://localhost/project/posts', {
params: {
page: this.page,
},
})
.then(({ data }) => {
if (data.data.length) {
this.page += 1;
this.posts.push(...data);
Vue.filter('myOwnTime', function(value){
return moment(value).fromNow();
});
$state.loaded();
} else {
$state.complete();
}
});
},
like function is same for both
likePost(id){
axios.get('http://localhost/project/posts' + id)
.then(response => {
console.log(response);
this.allposts();//
})
.catch(function (error) {
console.log(error);
});
},
} ```
How can i see ontime like without page refresh ?Please help me figure this out
I want to send a post request to Laravel backend using Vue.js. I'd like to make it without any extra library. I am making a pure Vue.http.get request and it works like a charm. For testing Laravel route and Controller returned data, I've made a ajax request in my template, which also works fine, returning the correct data. However, when I use Vue, via Vue.http.post('My/Controller/Route',data) it doesn't sends the post data to the Controller.
My Vue.js component:
<template>
<div class="opt-pro" v-for="r in profissionais">
<input :id="r.id" type="checkbox" :value="r.id" v-model="checkedNames" v-on:change="filterResources()"/><label> {{ r.title }}</label>
</div>
</template>
<script>
export default {
data() {
return {
dados: {view: 'dia', pro: [], data: 'Setembro 11, 2017'},
meus_recursos: [],
profissionais: [],
checkedNames: []
}
},
methods:{
getResources: function() {
var self = this;
return Vue.http.get('/admin/getResources').then((response) => {
_.forEach(response.data.resources,function(item){
self.meus_recursos.push(item);
self.profissionais.push(item);
});
console.log(self.meus_recursos);
});
},
filterResources: function(){
this.dados.pro = this.checkedNames; // returned by another Vue piece of code - console.log() returns the correct data for this var
return Vue.http.post('/admin/getAgendamentosPorProfissional', this.dados).then(
(response) => {
console.log(response.body);
},
(response) => {
console.log("Error");
console.log(response);
console.log(response.body);
});
}
}
My Laravel Controller function:
public function getAgendamentosPorProfissional(){
// $view = $_POST['view'];
// $pro = $_POST['pro'];
// $data = $_POST['data'];
$post = $_POST;
return response()->json(array('post' => $post),200);
}
It returns in my console:
{post: Array(0)}
My jQuery AJAX function:
$.ajax({
type:'POST',
url:'/admin/getAgendamentosPorProfissional',
data: {"data": data, "view": view, "pro": [pro],"_token": "{{ csrf_token() }}"},
success:function(data){
console.log("AJAX - /admin/getAgendamentosPorProfissional");
console.log(data);
}
});
It returns in my console:
post:
data: "Setembro 11, 2017",
pro:["75"]
view:"dia"
_token:"6LviacS2KoBqjXxTsFhnTtAQePuEzZ49OMwqBmbM"
It's not a CORS issue, since it returns the correct data from the requested url in laravel. How can I fix this?
My token is set at laravel/resources/assets/js/bootstrap.js file:
window.Vue = require('vue');
require('vue-resource');
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
please find vuejs code below. When i access the url directly on the browser, the data(JSON) are retrieved but when retrieving the data by the http request, the data are not stored in the variable. I am using Vuejs and Laravel. Can someone tell me what is wrong with the code. Thank you.
<script>
Vue.component('account-type-list', {
template: `<div></div>`
data:() => {
return {
typesofaccount:[]
};
},
created: function() {
this.getAccountTypes();
},
methods: {
getAccountTypes: function() {
this.$http.get('/list/accounttypes').then(response => {
this.typesofaccount = response.body
});
},
}
});
Vue.component('type', {
template: '<a class="active item"><slot></slot></a>'
});
new Vue({
el: '#root',
});
</script>
this inside the response callback is likely not your component.
Try:
getAccountTypes: function() {
var component = this;
this.$http.get('/list/accounttypes').then(response => {
component.typesofaccount = response.body
});
},
Had to import
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.3.4"></script>
in the child blade template not in the main layout.
How can I retrieve json in Vuejs in vue.js in laravel 4?
I tried following but it didn't work:
new Vue({
el: '#guestbook',
data: {
comments: [],
text: '',
author: ''
},
ready: function() {
this.getMessages();
},
methods: {
getMessages: function() {
$.ajax({
context: this,
url: "/cms/Getweb_manager",
success: function (result) {
this.$set("comments", result)
}
})
}
}
})
Have you tried logging the response? Just use a console.log(result).
About your doubt, you probably have to do this.$set('comments', result.data');.
Don't forget the semicolon!
Have a look at the vue-resource package
https://github.com/vuejs/vue-resource
It should work like this
methods: {
getMessages: function() {
this.$http({
url: '/cms/Getweb_manager',
method: 'GET'
}).then(function (response) {
// success callback
this.$set('comments', response.result);
}, function (response) {
// error callback
});
}
}
I'm new to Ember js and I'm having some difficulty seeing why this isn't working. Essentially i'm sending a GET request to a server and it is giving me an array. I would like to take that array display its contents.
app.js
App.TestRoute = Ember.Route.extend({
model: function(){
return App.Test.findAll();
}
});
App.Test = Ember.Object.extend();
App.Test.reopenClass({
findAll: function() {
var dummyArray = [];
$.ajax({
type: 'GET',
url: 'myurl',
headers: {'myheader'},
success: function(data){
data.dummyArray.forEach(function (item){
dummyArray.push(App.Test.create(item));
});
return dummyArray;
},
error: function(request, textStatus, errorThrown){
alert(errorThrown);
console.log();
}
});
}
});
When you to the test page the action should fire and an array should be returned to the model where the data can be grabbed to populate the page
and in my HTML I have this:
script type="text/x-handlebars" id="test">
<ul>
{{#each item in model}}
<li>{{item.ID}}</li>
{{/each}}
</ul>
{{outlet}}
</script>
In the console when I log the data that I returned it looks something like this:
Object {dummyArray: Array[4]}
dummyArray: Array[4]
0: Object
ID: 1111
1: Object
ID: 1112
2: Object
ID: 1113
3: Object
ID: 1114
The app runs with no errors but when I navigate to my test page the page does not populate with any data.
Your problem is that your synchronous code is returning nothing. Your model function returns App.Test.findAll(), which is never anything. You need to return a promise.
findAll: function () {
var result = [];
return new Ember.RSVP.Promise(function (resolve, reject) {
Ember.$.ajax({
type: 'GET',
url: 'myurl',
headers: { 'myheader' },
success: function (data) {
data.dummyArray.forEach(function (item) {
result.push(App.Test.create(item));
});
resolve(result);
},
error: function (request, textStatus, error) {
console.log(error);
reject(error);
}
});
});
}