vue-resource get 请求在 Laravel 5.3 上不工作

Question

这是 MAMP 上的全新 Laravel 5.3 安装。

我正在尝试使用 vue-resource 的获取请求从 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

我认为 Laravel 与 VueJS 2.0 一起出现 version.In Vue2 ready() 生命周期挂钩已弃用，因此您必须使用 created() 或 mounted() 取决于关于您的用例。

Answer 2

这里有一些问题，首先正如 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/

vue-resource get 请求在 Laravel 5.3 上不工作

vue-resource get request not working on Laravel 5.3

javascript

laravel

vue.js

vue-resource

laravel-5.3