I'm using the VuetifyJS/VueJS data table with an expand slot. How to make the content in the expand slot searchable? I tried wrap the content within <td></td>
but that didn't work.
Here is a codepen example: https://codepen.io/anon/pen/VBemRK?&editors=101
If you search for "find me" it always results in a Your search for "find me" found no results.
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
item-key="name"
>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded">
<td></td>
<td class="text-xs-right"></td>
<td class="text-xs-right"></td>
<td class="text-xs-right"></td>
<td class="text-xs-right"></td>
<td class="text-xs-right"></td>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text><td>Peek-a-boo! Please find me too.</td></v-card-text>
</v-card>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "" found no results.
</v-alert>
</v-data-table>
from How to make content in an expand slot of a data table in VuetifyJS searchable?
No comments:
Post a Comment