Why doesn't my search work when I use Vue.js?

Question

I'm making a simple search engine for my Laravel 5 app. As it's only small, I'm just using a FULLTEXT index on my main table. I'm trying to use Vue.js to avoid a page reload.

In my SearchController I simply have:

public function search(Request $request)
    {
        $search = $request->search;

        $results = Product::whereRaw("MATCH (product_name, product_description) AGAINST (? IN BOOLEAN MODE)", array($search))->get(array('product_name','slug'));

        return $results;
    }

Javascript:

getResults: function(e){
        e.preventDefault();
        this.$http.get('api/search', function(search){
            this.$set('searchResults', search);
        });
}

and the form:

{!! Form::open(['v-on' => 'submit: getResults($event)', 'method' => 'get', 'action' => 'SearchController@search']) !!}
        <div class="form-group">
            {!! Form::label('search','Search:') !!}
            {!! Form::text('search', null, ['class' => 'form-control', 'v-model' => 'search']) !!}
        </div>

        <div class="form-group">
            {!! Form::submit('Submit', ['class' => 'form-control btn btn-primary']) !!}
        </div>

{!! Form::close() !!}

If I remove Vue.js from the equation, the form submits and I get a nice JSON object of search results. If I put it through Vue.js, I just get an empty object. I'm using the same search term in both cases.

What am I doing wrong?

EDIT: I've logged search to the console in my getResults function, and it's empty, which explains things a little. But why is it empty? If I echo out the data search is populated as I type by Vue's 2-way binding, so search definitely is not empty...

Answer 1

It's because you don't send anything with vueJS. No data are sent with the ajax request. You need to do something like that.

this.$http.get('api/search', this.search , function(search){
        this.$set('searchResults', search);
    });