Question

这是MAMP上新的Laravel 5.3安装。

我正在尝试使用vue-resource的get请求从json API端点获取数据。但它返回一个空数组。

这是我的app.js 我这里没有使用任何组件。

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

var app = new Vue({
    el: '#main',
    data: { 
        searchString: "",
        articles: []
    },
    ready: function() {
        this.fetchData();
    },
    methods: {
        fetchData: function () {
            this.$http.get('http://localhost:8888/pos/public/api/items',     function(articles) {
                this.$set('filteredArticles', articles);
            });
        }
    },
    computed: {
    // A computed property that holds only those articles that match the searchString.
    filteredArticles: function () {
        var articles_array = this.articles,
            searchString = this.searchString;

        if(!searchString){
            return articles_array;
        }

        searchString = searchString.trim().toLowerCase();

        articles_array = articles_array.filter(function(item){
            if(item.title.toLowerCase().indexOf(searchString) !== -1){
                return item;
            }
        })

        // Return an array with the filtered data.
        return articles_array;;
    }
}
});

以下是视图的html形式：

<div class="col-md-3" id="main">
    <label for="Search">Search Item</label>
        <div class="form-group">
            <input type="text" v-model="searchString" placeholder="Search here" />
        </div>
        <ul>
            <li v-for="article in filteredArticles">@{{ article.id }}</li>      
        </ul>

</div>

非常感谢任何帮助。

谢谢

Answer 1

这里有一些问题，首先正如Belmin所说，laravel附带Vue 2而ready()是Vue 1生命周期挂钩，而您需要使用{ {3}}

其次，Vue-router的正确语法是：

  // GET /someUrl
  this.$http.get('/someUrl').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });

第二个参数用于传递选项，而不是success回调：

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

您可以在created lifecycle hook

上找到有关此内容的更多信息

所以你应该最终得到这个：

//...
  created: function() {
    this.fetchData();
  },
  methods: {
    fetchData: function() {
      this.$http.get('http://localhost:8888/pos/public/api/items').then(function(articles) {
        this.filteredArticles = articles
      });
    }
  },
//...

这是一个显示正确语法的JSFiddle：Vue-Router Github page

Answer 2

我认为Laravel推出了VueJS 2.0版本。在Vue2 ready()生命周期挂钩已被弃用，因此您必须根据用例使用created()或mounted()。

vue-resource get请求不在Laravel 5.3上运行

2 个答案: