通过电话阵列搜索不起作用。
我在 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
如果您更改手机阵列"phones": ['32323223232','4343434343434','54545454545454']并更改模板，<p v-for="(phone, key) in item.phones" :key="key">{{ phone }}</p>它应该可以工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句