title: Search input in dynamic table
body: <p>I'm new to Vue.js, so thanks for the help!!
  I'm trying to implement a Search input for each column that filters the results for the user</p>
  <p>this is my HTML file:</p>
  <pre><code>    &lt;div id=&quot;table&quot;  &gt;
          &lt;div class=&quot; container jumbotron mt-3 &quot;&gt;
              &lt;enter-data :resources=&quot;resources&quot; &gt;&lt;/enter-data&gt;
      
          &lt;/div&gt;
          &lt;div class=&quot; container jumbotron  mt-1 &quot;&gt;
              &lt;table-list :resources=&quot;resources&quot; :heads=&quot;heads&quot; &gt;&lt;/table-list&gt;
      
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>And this is my JS file:</p>
  <pre><code>Vue.component('table-list', {
    props: ['resources', 'heads'],
    data () {
      return {
  
        selected: [],
        selectAll: true,
        userIds: [],
        searchQuery: ''
  
      }
    },
  
    computed: {
      filteredResources: function () {
        if (this.searchQuery) {
          return this.resources.filter(item =&gt; {
            // return this.item.value.toLowerCase().includes(this.searchQuery.toLowerCase());
            // return this.searchQuery.toLowerCase().split(' ').every(v =&gt; item.value.toLowerCase().includes(v))
            return this.item.FName.startsWith(this.searchQuery)
            // return item.indexOf(this.searchQuery)&gt;= 0;
          })
        } else {
          return this.resources
        }
      }
    },
    methods: {
      sortTable: function (resource) {
        this.resources.sort(function (a, b) {
          if (a[resource.value] &gt; b[resource.value]) {
            return 1
          } else if (a[resource.value] &lt; b[resource.value]) {
            return -1
          }
          return 0
        })
      }
  
    },
    template: `
      &lt;div class=&quot;w-100 text-center d-flex justify-content-center flex-wrap&quot;&gt;
        &lt;div class=&quot;w-75&quot;&gt;
          &lt;!--         &lt;input type=&quot;text&quot; placeholder=&quot;search..&quot; v-modle=&quot;searchQuery&quot; &gt;--&gt;
          &lt;table class=&quot;table table-striped&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;
                  &lt;input type=&quot;checkbox&quot;&gt;
                &lt;/th&gt;
                &lt;th v-for=&quot;resource in heads&quot; class=&quot;cursor&quot; @click=&quot;sortTable(resource)&quot;&gt;
                  &lt;div /&gt;
                  {{ resource.name }}
                &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td /&gt;
                &lt;td /&gt;
                &lt;td&gt;
                  &lt;input v-mode=&quot;searchQuery&quot; type=&quot;text&quot;&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;input type=&quot;text&quot;&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr v-for=&quot;resource in filteredResources&quot;&gt;
                &lt;td&gt;
                  &lt;input type=&quot;checkbox&quot;&gt;
                &lt;/td&gt;
                &lt;td v-for=&quot;column in heads&quot;&gt;
                  {{ resource[column.value] }}
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  })
  
  var app = new Vue({
    el: '#table',
    data: {
  
      resources: [
        { 'id': 0, 'FName': 'Setareh', 'LName': 'Pashapour', 'Extra': 'Alishah' },
        { 'id': 1, 'FName': 'Soheil', 'LName': 'Pashapour' },
        { 'id': 2, 'FName': 'Simin', 'LName': 'Hajizadeh' },
        { 'id': 3, 'FName': 'Nouyan', 'LName': 'Arman' },
        { 'id': 4, 'FName': 'Abed', 'LName': 'Hamrang' },
        { 'id': 5, 'FName': 'Navid', 'LName': 'Ahanj' }
      ],
      heads: [{ name: '#', value: 'id' }, { name: 'First Name', value: 'FName' }, { name: 'Last Name', value: 'LName' }]
  
    }
  
  })
  </code></pre>
  <p>Unfortunately it doesn't work
  searchQuery data doesn't have any impact to my filter computed and nothing happend if i type any thing on it
  my Any suggestions?</p>