CODEWITHSUNDEEP
vue.jsdatatablevuetify.js
Bin Ski.
Bin Ski.

Reputation: 1005

vuetify datatable search cannot search the value

I found the miss function on vuetify datatable. I think that my configuration is correct.

This is my datatable vuetify

                                    <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
                                        hide-details></v-text-field>
                                </v-card-title>
                                <v-data-table loading loading-text="Loading... Please wait" :headers="headers"
                                    :items="goodsData" :search="search" :items-per-page="10" class="elevation-1">
                                    <template v-slot:item.typeOfGoods="{ item }">
                                        <div class="userDatatable-inline-title my-3">
                                            <a href="#" class="text-dark fw-500">
                                                <h6 v-if="item.typeOfGoods == 1">Document
                                                    #{{item.receiptNumber}}</h6>
                                                <h6 v-if="item.typeOfGoods == 2">Packet
                                                    #{{item.receiptNumber}}</h6>
                                            </a>
                                            <p class="pt-1 d-block mb-0">
                                                <i class="fas fa-dolly"></i> via {{item.courier}} • Received at
                                                {{item.created_at}}
                                            </p>
                                        </div>
                                    </template>
                                    <template v-slot:item.receiver="{ item }">
                                        <img class="rounded-circle wh-34"
                                            :src="`/dashboard/img/author/profile/`+item.receiver.avatar"
                                            alt="author">&nbsp;
                                        {{item.receiver.name}}
                                    </template>
                                    <template v-slot:item.status="{ item }">
                                        <span class="media-badge color-white bg-primary" v-if="item.status==0">Available
                                            at
                                            receiptionist</span>
                                        <span class="media-badge color-white bg-success" v-if="item.status==1">Well
                                            received</span>
                                        <span class="media-badge color-white bg-danger"
                                            v-if="item.status==2">Terminated</span>
                                    </template>
                                    <template v-slot:item.actions="{item}">
                                        <a href="#" v-on:click="receivedAction(item.id)" v-if="item.status==0"><span
                                                style="color:blue;"><i class="far fa-check-circle"></i> Update
                                                status</span></a>
                                        <a v-if="item.status==1"><span style="color:green;"><i
                                                    class="fas fa-check-circle"></i>
                                                Done</span></a>
                                    </template>
                                </v-data-table>

This is my script data

                // datatable
                search: '',
                goodsData: [],
                headers: [{
                    text: 'Goods Type',
                    value: 'typeOfGoods'
                }, {
                    text: 'Recipient',
                    value: 'receiver'
                }, {
                    text: 'Status',
                    value: 'status'
                }, {
                    text: 'Actions',
                    value: 'actions',
                    filterable: false,
                    sortable: false
                }],

I already read the documentation on codepen and on https://vuetifyjs.com/en/components/data-tables/#api

Or you can see my repo, https://github.com/bintangjtobing/boxity-app/blob/master/resources/js/components/goodsReceipt.vue

You can see my gif below

enter image description here

Thank you, everyone, hope you can help to solve this prob. Thank you thank you.

Upvotes: 1

Views: 1119

Answers (2)

Maiah Dev&#39;s
Maiah Dev&#39;s

Reputation: 71

I found a simple solution for this by creating same header and value but hidden for the column used in template.

You can try this:

{ text: "", value: "header_value", align: ' d-none' },
{ text: "Header Name", value: "header_value" }

Wherein you have to hide the other one by using ' d-none' that will be use to still search the value of that column while the other one is use to display the value. Else if you don't want to use this, you can use the other solution stated here, by creating a custom filter/search.

Upvotes: 1

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31153

The search only looks in fields you’ve defined. The text “Document” is not in a field, it’s in your template. The number comes from receiptNumber which is not defined in headers or anywhere, it’s just in the template. Therefore the search can’t know about that either.

You’ll need to provide your own filter function as the documentation you linked to explains in the beginning. I don’t see such defined here.

Upvotes: 1

Related Questions