Issues with searching by phone array.
While creating a table on Vuetify, I encountered an issue - the search functionality does not work when trying to search by an array. I am struggling to find a solution to this problem. Any assistance would be greatly appreciated.
Template:
<div id="app">
<v-app>
<v-card>
<v-card-title>
<!-- Search form -->
<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
:headers="headers"
:items="items"
:search="search"
>
<template #item="{ item }">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.adress }}</td>
<td>
<p v-for="(phone, key) in item.phones" :key="key">
{{ phone.value }}
</p>
</td>
</tr>
</template>
<v-data-table>
</v-card>
</v-app>
</div>
Script:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
search: '',
headers: [
{
text: 'name',
value: 'name'
},
{
text: 'address',
value: 'address'
},
{
text: 'phones',
value: 'phones'
}
],
items: [
{
"name": 'John',
"adress": 'took 1',
"phones": [
{
'value': '32323223232'
},
{
'value': '4343434343434'
},
{
'value': '54545454545454'
},
]
}
]
}
}
})
Code: https://codepen.io/dev-sera/pen/OJRyPYp?editors=1111
p.s. I came across a similar issue but unsure how to implement the suggested solution for a numbered array -https://stackoverflow.com/questions/52845201/local-search-v-data-table-vuetify