我正在为我的 Laravel 5 应用程序制作一个简单的搜索引擎。由于它很小,我只是在主表上使用全文索引。我正在尝试使用 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,我只会得到一个空对象。我在这两种情况下都使用相同的搜索词。
我做错了什么?
编辑:我已在 getResults
函数中将 search
记录到控制台,它是空的,这解释了一些事情。但为什么是空的呢?如果我回显,数据搜索将在我通过 Vue 的 2 路绑定(bind)键入时填充,因此 search
绝对不为空...
最佳答案
这是因为你没有使用 vueJS 发送任何内容。 ajax 请求不会发送任何数据。你需要做类似的事情。
this.$http.get('api/search', this.search , function(search){
this.$set('searchResults', search);
});
关于javascript - 为什么我使用 Vue.js 时搜索不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31455189/