我正在使用Spatie的laravel-searchable包来帮助我在Laravel应用程序中使用搜索功能。
我的SearchController.php文件中有以下代码块：
public function searchCategories(Request $request) {
$results = (new Search())
->registerModel(Category::class, ['title', 'id'])
->search($request->input('query'));
return response()->json($results);
}
这些值通过vue.js函数返回，并提供一些帮助axios：
if(document.getElementById("search-all")) {
const app = new Vue({
el: '#search-all',
data() {
return {
query: null,
results: [],
isActive: false
};
},
watch: {
query(after, before) {
this.searchAll();
this.isActive = true;
}
},
methods: {
searchAll() {
axios.get('/search', {params: {query: this.query}})
.then(response => this.results = response.data)
.catch(error => {
});
}
}
});
}
然后我有表单输入来触发vue.js函数并检索HTML，如下所示：
<div v-if="results.length > 0 && query" class="results" v-bind:class="{ show : isActive}">
<div class="row main-row">
<div v-for="result in results.slice(0,10)" :key="result.id" class="col-lg-6">
<a :href="result.url">
<div class="card main-card result-card course-card">
<div class="course-card-content">
<h6 v-text="result.title"> </h6>
<hr>
</div>
</div>{{-- CARD END--}}
</a>
</div><!-- COL-4 END-->
</div><!-- ROW END-->
</div><!-- OVERVIEW END-->
这一切都工作正常，检索并显示JSON。但是，我需要PHP变量中的一些功能，或者我希望能够在Blade函数中使用JSON数据。
我试图从我的searchCategories()函数返回一个数组，如下所示：
public function searchCategories(Request $request) {
$results = (new Search())
->registerModel(Category::class, ['title'])
->search($request->input('query'));
$res = response()->json($results);
return array($results, $res);
}
但是，我现在不知道如何检索JSON数据。
总结：
我希望能够同时使用PHP变量和函数返回的JSON数据。
我想到的用法示例： 例如，我的结果中有一个背景图像，如下所示：
<div class="course-image" style="background: url({{asset('./img/categories/ . $res->image_name')}});"></div>
这只能(据我所知(通过访问JSON数据之外的PHP变量来实现。或者能够在我的bladeasset()函数中使用此JSON数据。
为什么不请求图像名称或您需要的所有参数，并在 js 部分进行其余部分，我认为如果您这样做会很容易。
public function searchCategories(Request $request) {
$results = (new Search())
->registerModel(Category::class, ['title', 'id', 'image_name'])
->search($request->input('query'));
return response()->json($results);
}
以及类似的其他部分
<div class="course-image" style="background: url({{asset('./img/categories/')}}result.image_name);">
我不知道 Vue.js但它应该可以工作，因为 blade 会打印图像的基本路径，而 js 会打印其余的它应该可以工作，你可以试试
经过多次试验和错误，人们在这里为我指出正确的方向，我找到了解决方案：
我添加了一个额外的img_pathvar，用于保存图像路径的第一部分到我的vue.js函数：
data() {
return {
query: null,
results: [],
isActive: false,
img_path: 'img/categories/'
};
},
然后我在v-bind:style中检索它，其中包含结果的输出，如下所示：
<div class="course-image" v-bind:style="{ backgroundImage: 'url(' + img_path + result.image_name + ')' }"></div>