Tuesday 17 July 2018

How to make content in an expand slot of a data table in VuetifyJS searchable?

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