为什么当我使用Vue.js时搜索不起作用？_JavaScript

我正在为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函数中的控制台中，并且它为空，这在getResults解释了事情。 但是为什么它是空的？ 如果我在通过Vue的2向绑定输入时回显了数据搜索，那么search肯定不是空的...

这是因为您不使用vueJS发送任何内容。 没有数据与ajax请求一起发送。 您需要执行类似的操作。

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

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

问题描述

1楼