vue-resource get request not working on Laravel 5.3

Question

It's a fresh Laravel 5.3 installation on MAMP.

I'm trying to fetch data from a json API endpoint with vue-resource's get request. But it's returning an empty array.

Here's my app.js I haven't used any components here.

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

Here's the html form the view:

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

Any help is highly appreciated.

Thank You


Show source
| javascript   | laravel   | laravel-5.3   | vue.js   | vue-resource   2017-01-07 12:01 2 Answers

Answers ( 2 )

  1. 2017-01-07 12:01

    I think that Laravel comes out with VueJS 2.0 version.In Vue2 ready() lifecycle hook is deprecated so you have to use created() or mounted() depending on your use case.

  2. 2017-01-07 13:01

    There are a few issues here, firstly as Belmin said, laravel comes with Vue 2 and ready() is a Vue 1 lifecycle hook, instead you need to use the created lifecycle hook

    Secondly, the correct syntax for Vue-router is:

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

    The second parameter is for passing options, not for the success callback:

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

    You can find more about this on the Vue-Router Github page

    So you should end up with this:

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

    Here's a JSFiddle to show the correct syntax: https://jsfiddle.net/mLjajttz/

◀ Go back