Local search v-data-table Vuetify

Question

I've got an array of objects: productos[] , I use this to populate the v-datatable .

I've been trying to add the search texfield such as the Vuetify documentation says. I've added this but it only works (for some reason) with the headers that has numbers and it doesn't work for example when you type a string.

I think i'm doing something wrong.

Search textfield:

  <v-text-field
   v-model="search"
   append-icon="search"
   label="Search"
    single-line
    hide-details
 ></v-text-field>

v-datatable

   <v-data-table
          :headers="headers"
          :items="productos"
          :search="search"
          hide-actions
          class="elevation-1"
        >
          <template slot="items" slot-scope="props">
            <td class="text-xs-left">{{ props.item.ListadoProductoId }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.nombre }}</td>
            <td class="text-xs-left"> ${{ props.item.ListadoProducto.precio }}</td>
            <td class="text-xs-left">{{ props.item.disponible }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.lim_falt }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.lim_exc }}</td>
</v-data-table>

Headers and some others scripts:

export default {
  data () {
    return {
      error: null,
      search: '',
      headers: [
        {text: 'ID_PROD', value: 'ListadoProductoId', sortable: false},
        {text: 'Nombre', value: 'nombre'},
        {text: 'Precio', value: 'precio'},
        {text: 'Disponible (u)', value: 'disponible'},
        {text: 'Limite faltantes', value: 'lim_falt'},
        {text: 'Limite excedentes', value: 'lim_exc'}
      ]
    }
  }
}

Productos array example:

  productos: [
    {
      ListadoProducto: {
        id: 5,
        lim_exc: 5000,
        lim_falt: 200,
        nombre: "Algo",
        precio: 300
      },
      ListadoProductoId: 5,
      disponible: 100,
      id: 5
    },
    {
      ListadoProducto: {
        id: 6,
        lim_exc: 1000,
        lim_falt: 200,
        nombre: "Bgo",
        precio: 450
      },
      ListadoProductoId: 6,
      disponible: 0,
      id: 6
    }
  ]

Pics: Without searching

Searching with a number (It match with the first header)

Searching with string (I can't get it match with the second header ie)

Answer 1

You have to tell v-data-table headers if your objects value are nested.

Assuming your object structure is :

{
  ListadoProducto: {
    id: 5,
    lim_exc: 5000,
    lim_falt: 200,
    nombre: "Algo",
    precio: 300
  },
  ListadoProductoId: 5,
  disponible: 100,
  id: 5
}

Specify nested node in your headers, for example value: 'ListadoProducto.nombre' , like that, the search knows that your object is not flat.

headers: [
    {text: 'ID_PROD', value: 'ListadoProductoId', sortable: false},
    {text: 'Nombre', value: 'ListadoProducto.nombre'},
    {text: 'Precio', value: 'ListadoProducto.precio'},
    {text: 'Disponible (u)', value: 'disponible'},
    {text: 'Limite faltantes', value: 'ListadoProducto.lim_falt'},
    {text: 'Limite excedentes', value: 'ListadoProducto.lim_exc'}
]

Working SandBox Example

Answer 2

The problem is in your productos array structure, the search doesn't go deeper in your items :

if you have an item with the following properties :

item: {
  id: 1,
  address: "adr 1",
  name: {
    first: "John",
    last: "Doe"
  }
}

it could only reach id and address but not first and last properties, if you want that your all attributes would be searchable, your items should have a structure like this :

item: {
  id: 1,
  address: "adr 1",
  firstname: "John",
  lastname: "Doe"

}

In the following snippet i changed your productos array structure and it works fine, run it to see :

 new Vue({ el: '#app', data: { error: null, search: '', productos: [{ id: 5, lim_exc: 5000, lim_falt: 200, nombre: "Algo", precio: 300, ListadoProductoId: 5, disponible: 100, id: 5 }, { id: 6, lim_exc: 1000, lim_falt: 200, nombre: "Bgo", precio: 450, ListadoProductoId: 6, disponible: 0, id: 6 } ], headers: [{ text: 'ID_PROD', value: 'ListadoProductoId', sortable: false }, { text: 'Nombre', value: 'nombre' }, { text: 'Precio', value: 'precio' }, { text: 'Disponible (u)', value: 'disponible' }, { text: 'Limite faltantes', value: 'lim_falt' }, { text: 'Limite excedentes', value: 'lim_exc' } ] } })

 <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field> <v-data-table :headers="headers" :items="productos" :search="search" hide-actions class="elevation-1"> <template slot="items" slot-scope="props"> <td class="text-xs-left">{{ props.item.ListadoProductoId }}</td> <td class="text-xs-left">{{ props.item.nombre }}</td> <td class="text-xs-left"> ${{ props.item.precio }}</td> <td class="text-xs-left">{{ props.item.disponible }}</td> <td class="text-xs-left">{{ props.item.lim_falt }}</td> <td class="text-xs-left">{{ props.item.lim_exc }}</td> </template> </v-data-table> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> </body> </html>