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.

Answer 1

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>