Локальный поиск v-data-table Vuetify

Question

У меня есть массив объектов: productos[], я использую это для заполнения v-datatable.

Я пытался добавить поиск texfield, такой как Vuetifyдокументация говорит.Я добавил это, но это работает (по какой-то причине) только с заголовками, которые имеют номера, и это не работает, например, когда вы вводите строку.

Я думаю, что я делаю что-то не так.

Текстовое поле поиска:

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

Заголовки и некоторые другие сценарии:

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:

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

Картинки: Без поиска

Поиск по номеру (соответствует первому заголовку)

Поиск по строке (не удается получить совпадение со вторым заголовком, т. Е.)

Answer 1

Вы должны указать v-data-table заголовкам, если значение ваших объектов является вложенным.

Предполагается, что ваша структура объекта:

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

Укажите вложенный узел в ваших заголовках, например value: 'ListadoProducto.nombre' вот так, поиск знает, что ваш объект не плоский.

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'}
]

Рабочий пример SandBox

Answer 2

Проблема в структуре вашего productos массива, поиск не идет глубже по вашим элементам:

, если у вас есть элемент со следующими свойствами:

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

он может достичь только свойств id и address, но не first и last. Если вы хотите, чтобы все ваши атрибуты были доступны для поиска, ваши элементы должны иметь такую ​​структуру:

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

}

В следующем фрагменте я изменил productos структуру массива, и она работает нормально, запустите ее, чтобы увидеть:

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>