title: Vue: Implementing Vue table search
body: <p>I have a table in vue template, The search is not working, Don't know what i missed.</p>
  
  <pre><code>&lt;input type="text" class="dv-header-input" v-model="query.search_input"
    @keyup.enter="fetchRecords()"&gt;
  </code></pre>
  
  <p>And the table : </p>
  
  <pre><code>&lt;tr v-for="row in filteredRow"&gt;
      &lt;td v-for="(value, key) in row"&gt;{{value}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>And the JS : </p>
  
  <pre><code>  export default {
      props: [
        'source', 
        'title',
      ],
      data() {
        return {
          model: { data: [] },
          columns: {},
          query: {
            search_input: ''
          },
        }
      },
      created() {
        this.fetchRecords()
      },
      methods: {
        fetchRecords() {
          var vm = this
          // Not original API, 
          axios.get(/get/Details)
            .then(function(response) {
              Vue.set(vm.$data, 'model', response.data.model)
              Vue.set(vm.$data, 'columns', response.data.columns)
            })
            .catch(function(response) {
              console.log(response)
            })
        }
      },
      computed: {
        filteredRow: function(){
          return this.model.data.filter((row) =&gt; {
          for(var key in row){
              return String(row[key]).indexOf(this.query.search_input);
            }
          });
        }
      }
    }
  </code></pre>
  
  <p>In <code>filteredRow</code>, I <code>console.log(String(row[key]).indexOf(this.query.search_input))'</code> which gives me <code>30 times 0</code>.</p>
  
  <p>What am i missing and whats the best approach.</p>