vue-resource 获取请求在 Laravel 5.3 上不起作用答案

【问题标题】：vue-resource get request not working on Laravel 5.3vue-resource 获取请求在 Laravel 5.3 上不起作用
【发布时间】：2017-05-22 02:36:50
【问题描述】：

这是在 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>

非常感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript laravel vue.js laravel-5.3 vue-resource

【解决方案1】：

这里有几个问题，首先正如 Belmin 所说，laravel 带有 Vue 2 和 ready() 是一个 Vue 1 生命周期钩子，而不是你需要使用 created lifecycle hook

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

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

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

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

您可以在Vue-Router Github page 上找到更多相关信息

所以你应该得到这个：

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

这是一个显示正确语法的 JSFiddle：https://jsfiddle.net/mLjajttz/

【讨论】：

非常感谢您的回答。顺便说一句，在我的 Laravel 5.3 中它是 Vue 1.0.28，我不知道为什么。我应该尝试 Vue 2.1.8 并尝试上述过程吗？
这很奇怪，几个月前Laravel 开始与Vue 2 一起发货，但是是的，您应该更新到Vue 2，这是对Vue 1 的巨大改进，并确保您还有最新版本的vue-router。

【解决方案2】：

我认为 Laravel 带有 VueJS 2.0 版本。在 Vue2 中，ready() 生命周期钩子已被弃用，因此您必须使用 created() 或 mounted()，具体取决于您的用例。

【讨论】：