Vue.js - this.$http.get is not working

Question

I am developing project in laravel with Vue js.

below is my code and when I use this.$http.get method of Vue-resource js I am not getting anything but if I use $.getJSON method I'm getting all the records from database

brand.blade.php

@section('content')

<div class="container">

        <brands></brands>

    </div>

    <template id="brand-template">

        <ul>

            <li v-for="brand in list.brand"> @{{ brand }}  </li>

        </ul>

    </template>

@endsection

@push('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script src = "public/js/brand.js"></script>
@endpush

brand.js

Vue.component('brands',{

template: '#brand-template',

data: function(){

    return{

        list: []
    }

},

created: function(){

    this.$http.get('api/brands', function(brand){
    // if I use $.getJSON then it'e working perfect and I'm getting all the records
      this.list = brand;

    }.bind(this));

}

});

new Vue({

el: '.container'


})

Can anyone tell me what's going on I can't figure out.

Can you show us how you setup vue? Did you actually add the vue-resource? Is this.$http undefined or the response? — Frnak
– Frnak, Commented Jan 11, 2017 at 10:11

David Jones · Accepted Answer · 2017-01-11 11:19:01Z

2

VueResource returns a response object. Try using .body

var app = new Vue({
  el: '#app',
  data: {
    posts: []
  },
  mounted: function() {
    var vm = this
  	this.$http.get('https://jsonplaceholder.typicode.com/posts')
    .then(function(response) {
    	vm.posts = response.body
    })
  }
})

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<div id="app" v-cloak>
  <ul>
    <li v-for="post in posts">
      {{ post.title }}
    </li>
  </ul>
</div>

edited Jan 11, 2017 at 11:19

answered Jan 11, 2017 at 6:02

David Jones

3,4122 gold badges20 silver badges26 bronze badges

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

4 Comments

Dhaval Over a year ago

you mean like this : this.$http.get('api/brands', function(brand){ this.list = brand.body; }.bind(this));

Dhaval Over a year ago

can you post code for this issue here so I can understand better way and in future other developer also can figure out what's going on.

Dhaval Over a year ago

I'm getting error in this line .then(response =>//(here getting error) this.list = response.body)

Dhaval Over a year ago

@djones thanks it's working. I have also test with mzabriskie/axios package. and I thing I suit axios more. thanks by the way.

Collectives™ on Stack Overflow

Vue.js - this.$http.get is not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related