title: Local search v-data-table Vuetify
body: <p>I've got an array of objects: <code>productos[]</code>, I use this to populate the <code>v-datatable</code>.</p>
  
  <p>I've been trying to add the search <code>texfield</code> such as the <code>Vuetify</code> 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.</p>
  
  <p>I think i'm doing something wrong.</p>
  
  <p><strong>Search textfield:</strong></p>
  
  <pre><code>  &lt;v-text-field
     v-model="search"
     append-icon="search"
     label="Search"
      single-line
      hide-details
   &gt;&lt;/v-text-field&gt;
  </code></pre>
  
  <p><strong>v-datatable</strong></p>
  
  <pre><code>   &lt;v-data-table
            :headers="headers"
            :items="productos"
            :search="search"
            hide-actions
            class="elevation-1"
          &gt;
            &lt;template slot="items" slot-scope="props"&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.ListadoProductoId }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.ListadoProducto.nombre }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt; ${{ props.item.ListadoProducto.precio }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.disponible }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.ListadoProducto.lim_falt }}&lt;/td&gt;
              &lt;td class="text-xs-left"&gt;{{ props.item.ListadoProducto.lim_exc }}&lt;/td&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  
  <p><strong>Headers and some others scripts:</strong></p>
  
  <pre><code>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'}
        ]
      }
    }
  }
  </code></pre>
  
  <p><br>
  <br>
  <strong>Productos array example:</strong> <br></p>
  
  <pre><code>  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
      }
    ]
  </code></pre>
  
  <p><strong>Pics:</strong>
  Without searching<br></p>
  
  <p><a href="https://i.stack.imgur.com/VCCgJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VCCgJ.png" alt="A"></a>
  <br></p>
  
  <p><strong>Searching with a number</strong> (It match with the first header)<br></p>
  
  <p><a href="https://i.stack.imgur.com/k5pMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k5pMF.png" alt="B"></a>
  <br></p>
  
  <p><strong>Searching with string</strong> (I can't get it match with the second header i.e.)<br>
  <a href="https://i.stack.imgur.com/KEk1i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEk1i.png" alt="C"></a></p>