javascript - 由于数组（Vue + Vuetify)

Question

通过电话阵列搜索不起作用。

我在 Vietify 上做了一个表，我遇到了一个问题——如果我需要按数组搜索，搜索不起作用，我不知道如何解决这个问题。请帮忙。

模板：

<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>

脚本：

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'
        //     },
        //   ]
        // }
      ]
    }
  }
})

代码：https ://codepen.io/dev-sera/pen/OJRyPYp?editors=1111

ps我发现了一个类似的问题，但我不知道如何将此解决方案应用于编号数组-https://stackoverflow.com/questions/52845201/local-search-v-data-table-vuetify

标签： javascriptvue.jsvuetify.jsv-data-table

Answer 1

如果您更改您的手机阵列"phones": ['32323223232','4343434343434','54545454545454']并更改您的模板<p v-for="(phone, key) in item.phones" :key="key">{{ phone }}</p>，它应该可以工作。