当我使用Vue.js时,为什么我的搜索不起作用?

时间:2015-07-16 13:12:05

标签: javascript php laravel vue.js

我正在为我的Laravel 5应用程序制作一个简单的搜索引擎。因为它很小,我只是在我的主表上使用FULLTEXT索引。我正在尝试使用Vue.js来避免页面重新加载。

在我的SearchController中,我只需:

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

和表格:

{!! 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() !!}

如果我从等式中删除Vue.js,表单提交,我得到一个很好的搜索结果的JSON对象。如果我通过Vue.js,我只是得到一个空对象。我在两种情况下都使用相同的搜索词。

我做错了什么?

编辑:我已在我的search函数中将getResults记录到控制台,它是空的,这解释了一些事情。但为什么它是空的?如果我回应数据搜索是按照我按Vue的双向绑定键入的,那么search肯定不是空的......

1 个答案:

答案 0 :(得分:0)

这是因为你不用vueJS发送任何东西。没有与ajax请求一起发送数据。你需要做那样的事情。

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