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."
      },

   ]
}

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
– Deo, Commented Nov 28, 2017 at 3:32
try like this this.$http.get('/registerlist').then( function (response) { }, function (error) { }); — Casper
– Casper, Commented Nov 28, 2017 at 3:39

Phil · Accepted Answer · 2017-11-28 04:53:24Z

1

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')
  })
}

answered Nov 28, 2017 at 4:53

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Casper · Accepted Answer · 2017-11-28 03:53:26Z

0

Try like this,

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

edited Nov 28, 2017 at 3:53

answered Nov 28, 2017 at 3:43

Casper

1,53911 silver badges19 bronze badges

3 Comments

Casper Over a year ago

what happen when you log response.body ?

Deo Over a year ago

Nothing happens

Casper Over a year ago

Instead of using function syntax, use arrow functions and try i have updated code

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related