I am dealing with a Vuetify data table component that displays an array of items. Within this array, there is another array that I iterate over using a template tag to display the information in just one column. Take a look at the code snippet below:
<v-text-field
v-model="searchManagers"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headersManagers"
:items="managers"
:search="searchManagers"
class="elevation-1"
>
//ATTENTION TO THIS PART HERE
<template v-slot:item.departments="{item}">
<p class="mt-2" v-for="(dpt, index) in item.departments" :key="index">{{dpt.name}}</p>
</template>
----------------------------------------
<template v-slot:item.status="{item}">
<span v-if="item.status">
<v-chip label outlined color="success">Active</v-chip>
</span>
<span v-else>
<v-chip label outlined color="error">Inactive</v-chip>
</span>
</template>
<template v-slot:item.action="{ item }">
<v-btn fab small color="primary" text>
<v-icon @click="editItem(item)">mdi-pencil-outline</v-icon>
</v-btn>
<v-btn fab small color="error" text>
<v-icon @click="deleteItem(item)">mdi-delete-outline</v-icon>
</v-btn>
</template>
<template v-slot:no-data>
<v-alert class="mt-4" color="primary" dark :value="true">
<v-icon x-large>mdi-emoticon-sad-outline</v-icon>
<br />No users found
</v-alert>
</template>
</v-data-table>
And here are the headers for this table:
headersManagers: [
{ text: "Name", align: "left", value: "fullName" },
{ text: "Username", align: "center", value: "username" },
{ text: "Office", align: "center", value: "office" },
{ text: "Department", align: "center", value: "departments" },
{ text: "Profile", align: "center", value: "profile.name" },
{ text: "Status", align: "center", value: "status" },
{ text: "Actions", align: "center", value: "action", sortable: false }
],
I am looking to make the search functionality work for the array of departments in the departments column as well, just like it works for the name/username/office fields. Currently, when I search for any department, no results are returned.
Here is an example of the full JSON object I am using:
{
"id": "bf6dbc41-4eca-42c4-ab3b-e4ada4aa671b",
"firstName": "name",
"lastName": "last name",
"username": "a.user",
"fullName": "name last name",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07626a666e6b47626a666e6b2964686a">[email protected]</a>",
"photoUrl": "http://some_url.com",
"personalPhone": "9999",
"workPhone": "9999",
"admissionDate": "2012-05-02T00:00:00",
"office": "office",
"jobTitle": "example",
"departments": [
{
"departmentId": "04aa5418-b217-4bca-9cf3-f77725508980",
"name": "department name",
"director": "director name"
},
{
"departmentId": "12602b8b-68ea-4539-b95e-01968c74247d",
"name": "other department name",
"director": "director name"
}
],
"status": true,
"country": null,
"city": null,
"neighborhood": null,
"addressNumber": 0,
"street": null,
"postalCode": null,
"profile": {
"id": "35631c5d-3269-4db9-98c8-e9896961e537",
"name": "example"
},
"createdAt": "2020-07-06T17:44:05.024359",
"isManager": true,
"isDirector": false
How can I adjust the search functionality to work for the departments column as well?