Currently, I am working on creating a search bar using Laravel and Vue JS with the Vuetify framework. Below are my controller functions:
/**
* Retrieve names and references of all projects for the user.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function getAllProjects()
{
return Project::forClient()->get(['name','reference']);
}
/**
* Search for projects based on query input.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function searchForProject(Request $request)
{
$query = $request->query('query');
$projects = Project::where('name', 'like', '%' . $query . '%')
->orWhere('reference', 'like', '%' . $query . '%')
->get();
return view('projects.edit', compact('projects'));
}
The search bar implementation in Vue is as follows:
<v-autocomplete
v-model="model"
:items="getProjNames"
:loading="isLoading"
clearable
hide-details
@keyup.enter="queryForProjects()"
item-text="name"
item-value="symbol"
solo
>
<template v-slot:no-data>
<v-list-item>
<v-list-item-title>
Please search for a project
</v-list-item-title>
</v-list-item>
</template>
</v-autocomplete>
Here are the relevant methods:
getAllProjects() {
var self = this;
apiClient.get(window.routes["projects.getAllProjects"])
.then(function (response) {
console.log(response.data);
self.projects = response.data;
})
.catch(function(error){
console.error(error);
if (!!error.response) console.log(error.response);
});
},
queryForProjects() {
var self = this;
apiClient.post(window.routes["projects.searchForProject"], {query: this.model})
.then(function (response) {
console.log(response.data);
self.projects = response.data;
})
.catch(function(error){
console.error(error);
if (!!error.response) console.log(error.response);
});
},
A computed value to list all projects has been defined:
computed: {
getProjNames() {
return this.projects.map(a => a.name);
}
},
Despite my efforts, I am encountering an error indicating that there may be an issue with the request. Unfortunately, I am unsure about what exactly is going wrong: