I am using computed values to fill my v-data-table and I can't seem to figure out how to fix the search property. I also want to make the columns sortable again if possible.
Here is my v-Data-Table:
<v-data-table
v-bind:search="search"
v-bind:headers="headers"
v-bind:items="myDataTransformed"
class="elevation-1 mx-2"
>
<template v-slot:[`item.company`]="{ item }">
<span>{{ item.company.name }}</span>
</template>
<template v-slot:[`item.trade`]="{ item }">
<span>{{ item.trade.name }}</span>
</template>
<template v-slot:[`item.region`]="{ item }">
<span>{{ item.region.name }}</span>
</template>
<template v-slot:[`item.project`]="{ item }">
<span>{{ item.project.name }}</span>
</template>
<template v-slot:[`item.rating`]="{ item }">
<v-rating readonly length="5" :value="item.rating"></v-rating>
</template>
<template v-slot:[`item.manager`]="{ item }">
<span>{{ item.manager.name }}</span>
</template>
<template v-slot:[`item.coordinator`]="{ item }">
<v-menu :close-on-content-click="false" :nudge-width="200" offset-x>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="pl-0 ml-0 mr-1 pr-1"
v-model="menu"
@click="getCoordinatorsInfo(item.coordinator)"
text
v-bind="attrs"
v-on="on"
>
<span class="mx-0 px-0"><v-icon class="mr-1" >mdi-account</v-icon>{{ item.coordinator.name }} </span>
</v-btn>
</template>
<v-card>
<v-row wrap class="mb-1">
<v-list>
<v-list-item>
<v-avatar class="mx-3 mt-3" color="primary">
<span size="36" class="white--text text-h5">{{selCoordinatorInitials}}</span>
</v-avatar>
<v-list-item-content>
<v-list-item-title>
<h1 class="mt-5">{{ item.coordinator.name }}</h1>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-row>
<v-divider></v-divider>
<v-row>
<v-switch v-model="contactEdit" label="Edit" class="mx-3 px-3"
>Edit</v-switch
>
</v-row>
<v-list>
<v-list-item>
<v-span class="justify-center"
><v-icon>mdi-email</v-icon></v-span
>
<v-list-item-action>
<v-text-field
:disabled="contactEdit != true"
v-model="selCoordinatorEmail"
color="primary"
label="Email"
></v-text-field>
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-span class="justify-center"
><v-icon>mdi-phone</v-icon></v-span
>
<v-list-item-action>
<v-text-field
:disabled="contactEdit != true"
class="px-0 mx-0"
v-model="selCoordinatorPhone"
color="primary"
label="Phone Number"
></v-text-field>
</v-list-item-action>
</v-list-item>
</v-list>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-btn text @click="menu=false"> Cancel </v-btn> -->
<v-btn
:disabled="contactEdit != true"
color="primary"
text
@click="updateContact(item.coordinator)"
>
UPDATE CONTACT
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
<!-- <v-btn text>{{ item.coordinator.name }}</v-btn> -->
</template>
<template v-slot:[`item.entryid`]="{ item }">
<v-btn>{{ item.entryid }}</v-btn>
</template>
<template v-slot:[`item.actions`]="{ item }">
<!-- <v-btn
@click="editEntry(item.entryid)"
:value="item.actions"
text
icon
small
>
<v-icon>mdi-pencil</v-icon>
</v-btn> -->
<v-btn
@click="deleteEntry(item.entryid)"
text
icon
small
:value="item.actions"
><v-icon color="red">mdi-delete</v-icon></v-btn
>
</template>
</v-data-table>
Here is my JS:
<script>
import db from "@/firebase";
export default {
name: "Home",
data() {
return {
search: "",
menu: false,
contactEdit: false,
selCoordinatorEmail: "",
selCoordinatorPhone: "",
selCoordinatorInitials: "",
//DATABASE INFOMATION
reviews: [],
companies: [],
trades: [],
regions: [],
projects: [],
rating: [],
managers: [],
coordinators: [],
deletedItem: "",
dialogDelete: false,
database: [],
headers: [
{
text: "Company",
align: "start",
sortable: true,
value: "company",
},
{ text: "Trade", sortable: true, value: "trade" },
{ text: "Region", sortable: true, value: "region" },
{ text: "Project", sortable: true, value: "project" },
{ text: "Rating", sortable: true, value: "rating" },
{ text: "B&G VDC Manager", sortable: true, value: "manager" },
{ text: "Trade Coordinator", sortable: true, value: "coordinator" },
{ text: "Comments", sortable: true, value: "comment" },
{ text: "Actions", sortable: true, value: "actions" },
{ text: "EntryId", sortable: true, value: "eid", align: " d-none" },
//{ text: 'EntryId', value: 'entryid', }
],
};
},
methods: {
async getDatabase() {
let result = await db.collection("db").get();
const docs = result.docs;
const reviewList = [];
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
//reviewList[item.id] = item.data();
reviewList.push({ data: item.data(), id: item.id });
console.log("Review Ids: ", item.id);
}
this.reviews = reviewList;
console.log("Database Information: ", this.reviews);
return result;
},
async getCompanies() {
let result = await db.collection("Company").get();
const docs = result.docs;
const companyHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
companyHash[item.id] = item.data();
}
this.companies = companyHash;
// console.log("Company Names & Ids: ", this.companies);
return result;
},
async getTrades() {
let result = await db.collection("Trades").get();
const docs = result.docs;
const tradeHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
tradeHash[item.id] = item.data();
}
this.trades = tradeHash;
// console.log("Trade Name & Ids: ", this.trades);
return result;
},
async getRegions() {
let result = await db.collection("Region").get();
const docs = result.docs;
const regionHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
regionHash[item.id] = item.data();
}
this.regions = regionHash;
// console.log("Region Name & Ids: ", this.regions);
return result;
},
async getProjects() {
let result = await db.collection("Projects").get();
const docs = result.docs;
const projectHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
projectHash[item.id] = item.data();
}
this.projects = projectHash;
// console.log("Project Name & Ids: ", this.projects);
return result;
},
async getManagers() {
let result = await db.collection("VDC Manager").get();
const docs = result.docs;
const managerHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
managerHash[item.id] = item.data();
}
this.managers = managerHash;
// console.log("Manager Name & Ids: ", this.managers);
return result;
},
async getCoordinators() {
let result = await db.collection("TradeCoordinator").get();
const docs = result.docs;
const coordinatorHash = {};
for (let i = 0; i < docs.length; i++) {
const item = docs[i];
coordinatorHash[item.id] = item.data();
}
this.coordinators = coordinatorHash;
console.log("Coordinator Name & Ids: ", this.coordinators);
return result;
},
getCoordinatorsInfo(doc) {
(this.contactEdit = false),
db.collection("TradeCoordinator").doc(doc.id).get();
const firstLetters = doc.name
.split(" ")
.map((word) => word[0])
.join("");
this.selCoordinatorInitials = firstLetters;
this.selCoordinatorEmail = doc.email;
this.selCoordinatorPhone = doc.phone;
},
updateContact(doc) {
console.log(
doc.id,
" Email: ",
this.selCoordinatorEmail,
" Phone: ",
this.selCoordinatorPhone
);
db.collection("TradeCoordinator").doc(doc.id).update({
email: this.selCoordinatorEmail,
phone: this.selCoordinatorPhone,
});
},
deleteEntry(doc) {
this.dialogDelete = true;
this.deletedItem = doc;
console.log("doc: ", doc);
},
deleteItemConfirm() {
//delete entry when button pressed
console.log("deleted item: " + this.deletedItem);
db.collection("db")
.doc(this.deletedItem)
.delete()
.then(function () {
console.log("Document sucessfully deleted!");
})
.catch(function (error) {
console.error("Error removing document: ", error);
});
this.closeDelete();
this.getDatabase();
},
closeDelete() {
this.dialogDelete = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
editEntry(doc) {
//edit entry when selectedd
console.log("doc: ", doc);
},
},
mounted() {
this.getDatabase();
this.getCompanies();
this.getTrades();
this.getRegions();
this.getProjects();
this.getManagers();
this.getCoordinators();
this.getCoordinatorsInfo();
},
components: {},
computed: {
myDataTransformed() {
const reviews = this.reviews.map((review) => {
return {
company: {
...this.companies[review.data.company_id],
id: review.data.company_id,
},
trade: {
...this.trades[review.data.trade_id],
id: review.data.trade_id,
},
region: {
...this.regions[review.data.region_id],
id: review.data.region_id,
},
project: {
...this.projects[review.data.project_id],
id: review.data.project_id,
},
rating: review.data.rating,
manager: {
...this.managers[review.data.manager_id],
id: review.data.manager_id,
},
coordinator: {
...this.coordinators[review.data.coordinator_id],
id: review.data.coordinator_id,
},
entryid: review.id,
comment: review.data.comment,
date: review.data.date,
};
});
console.log("Reviews: ", reviews);
return reviews;
},
},
};
</script>
I have found a similar solution here.
search doesn't work because of array (Vue + Vuetify <v-data-table>)
However, i was hoping to fix the search without a large restructure from what i have now...
