search doesn't work because of array (Vue + Vuetify <v-data-table>)

Question

search by phone array does not work.

I make a table on the Vietify, I ran into a problem - the search does not work if I need to search by an array, I can not figure out how to solve the problem. Please help.

template:

<div id="app">
  <v-app>
    <v-card>
       <v-card-title>
         <!-- search form -->
         <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Поиск"
            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: 'adress',
          value: 'adress' 
        },
        {
          text: 'phones',
          value: 'phones'
        }
      ],
      items: [
        { 
          "name": 'John',
          "adress": 'took 1',
          "phones": [
            {
              'value': '32323223232'
            },
            {
              'value': '4343434343434'
            },
            {
              'value': '54545454545454'
            },
          ]
        },
        // {
        //   "name": 'Dan',
        //   "adress": 'pook 2',
        //   "phones": [
        //     {
        //       'value': '32323223232'
        //     },
        //     {
        //       'value': '4343434343434'
        //     },
        //     {
        //       'value': '54545454545454'
        //     },
        //   ]
        // },
        // {
        //   "name": 'Carl',
        //   "adress": 'sook 3',
        //   "phones": [
        //     {
        //       'value': '32323223232'
        //     },
        //     {
        //       'value': '4343434343434'
        //     },
        //     {
        //       'value': '54545454545454'
        //     },
        //   ]
        // },
        // {
        //   "name": 'Lili',
        //   "adress": 'book 4',
        //   "phones": [
        //     {
        //       'value': '32323223232'
        //     },
        //     {
        //       'value': '4343434343434'
        //     },
        //     {
        //       'value': '54545454545454'
        //     },
        //   ]
        // }
      ]
    }
  }
})

code: https://codepen.io/dev-sera/pen/OJRyPYp?editors=1111

p.s. I found a similar problem but i dont know how to apply this solution to a numbered array -https://stackoverflow.com/questions/52845201/local-search-v-data-table-vuetify

Answer 1

if you change your phones array for "phones": ['32323223232','4343434343434','54545454545454'] and change in your template <p v-for="(phone, key) in item.phones" :key="key">{{ phone }}</p> it should work.