Vue.js in laravel does not return GET request with Ajax

Question

I'm trying to create a laravel app with a Vue.js to call a controller response, I've tried it with ajax alone and it works, but with Vue the GET method seems not working, there are also no error code for me to debug.

here is my Vue.js

<template>
<div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item"  v-for="unregboard in unregboards" :key="unregboard.boardId"> 
            {{ unregboard.boardName }}  
        </li>
    </ul>
</div>
</template>

<script>
export default {

    data(){
        return{
            unregboards:[]
        }
    } , created: function(){
        this.fetchUnreg()
    }, methods:{
        fetchUnreg: function () {
            console.log("test"); //this works
            this.$http.get('/registerlist', function(resp){
                this.unregboards = resp.unRegBoards;
                console.log(resp.unRegBoards);
                console.log('test'); // This doesn't
            }).bind(this);
        }
    } 

}
</script>

<style>

</style>

UPDATE

I have fixed something and the code, I had my hopes up, because unlike before I was able to log my json response, check my code below:

<template>
    <div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item"  v-for="unregboard in unregboards" :key="unregboard.boardId"> 
                {{ unregboard["boardName"] }}  
            </li>

        </ul>
    </div>
</template>

<script>
export default {

    data(){
        return{
            unregboards:[]
        }
    } , created: function(){
        this.fetchUnreg()
    }, methods:{
        fetchUnreg: function () {
            console.log("test");
            $.get('/registerlist', function(resp){
                this.unregboards = resp.unRegBoards;
                console.log(resp.unRegBoards);
            });
        }
    } 

}
</script>

<style>

</style>

The problem is on the template, I does not return anything on the "unregboards" Vue.js's For loop

Additional Info this is the json file that's being returned:

{
   "regBoards":[
      {
         "boardName":"Client 1",
         "boardId":"594a0ec09ad35eba4434142r",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Welcome Board",
         "boardId":"58d311eeace6df3821107648",
         "organization":null
      }
   ],
   "unRegBoards":[
      {
         "boardName":"Client 2",
         "boardId":"5935fc808823fdbe2875d63g",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Client 3",
         "boardId":"59190bf0b27a6f308820rh5u",
         "organization":"Dream Inc."
      },
      {
         "boardName":"Client 4",
         "boardId":"58a5006e9985e088628f634g",
         "organization":"Dream Inc."
      },

   ]
}

https://stackoverflow.com/questions/42387414/uncaught-typeerror-cannot-read-property-get-of-undefined-in-vuejs — Casper, Nov 28 '17 at 03:28
It's not the same, I've already installed vue-resources, As I said it returns no error, as you can see in the code that I've attached I've tried two console.log, the other one works the other doesn't. — Deo, Nov 28 '17 at 03:32
try like this this.$http.get('/registerlist').then( function (response) { }, function (error) { }); — Casper, Nov 28 '17 at 03:39

score 1 · Accepted Answer · answered Nov 28 '17 at 04:53

According to the vue-resource documentation, there is no second callback argument passed to the .get() method, only options.

Assuming the response body is JSON, you also should be parsing the response using the .json() method. Right now, you're assigning undefined to your data property.

fetchUnreg: function () {
  this.$http.get('/registerlist').then(resp => resp.json()).then(data => {
    this.unregboards = data
    console.log(this.unRegBoards)
    console.log('test')
  })
}

Casper · Answer 2 · 2017-11-28T03:53:26.707

0

Try like this,

this.$http.get('/registerlist').then(
    response => {
        this.unregboards = response.data
    }
);

edited Nov 28 '17 at 03:53

answered Nov 28 '17 at 03:43

Casper

1,469
10
19

what happen when you log response.body ? – Casper Nov 28 '17 at 03:45
Nothing happens – Deo Nov 28 '17 at 03:46
Instead of using function syntax, use arrow functions and try i have updated code – Casper Nov 28 '17 at 03:54

Vue.js in laravel does not return GET request with Ajax

2 Answers2