Question

我正在用Vue js开发laravel项目。

下面是我的代码，当我使用这个。$ http.get 方法时 Vue-resource js我没有得到任何东西，但如果我使用 $。getJSON 方法我从数据库中获取所有记录

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'


})

任何人都可以告诉我发生了什么我无法弄明白。

Answer 1

VueResource返回response个对象。尝试使用.body

＆＃13;

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

＆＃13;

[v-cloak] {
  display: none;
}

＆＃13;

<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>

＆＃13;

Vue.js - 这个。$ http.get无效

1 个答案: