title: Vue : Table filter on column name with condition
body: <p>I have the following code to filter the table. I select a column from drop-down like <code>age</code> then selects operator from another drop-down like <code>&lt;</code> and search input like <code>20</code>, And want to search table on them.</p>
  
  <p>Filter :</p>
  
  <pre><code>// Select column name
  &lt;select class="dv-header-select" v-model="query.search_column"&gt;
      &lt;option v-for="column in columns" :value="column"&gt;{{column}}&lt;/option&gt;
  &lt;/select&gt;
  
  // Select condition(&lt;,&gt;,&lt;=,&gt;=) 
  &lt;select class="dv-header-select" v-model="query.search_operator"&gt;
      &lt;option v-for="(value, key) in operators" :value="key"&gt;{{value}}&lt;/option&gt;
  &lt;/select&gt;
  
  // Search value
  &lt;input type="text" class="dv-header-input" placeholder="Search"
      v-model="query.search_input"&gt;
  </code></pre>
  
  <p>Please read the code comments in JS section to get the idea.</p>
  
  <pre><code>  &lt;tr v-for="row in getSearchedRow"&gt;
        &lt;td v-for="(value, key) in row"&gt;{{value}}&lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>  data() {
      return {
      model: { data: [] },
      // populating on API call
      columns: {},
      query: {
          search_column: 'id',
          search_operator: 'equal',
          search_input: ''
      }
    },
  
    getSearchedRow: function() {
  
      return this.model.data.filter(row =&gt; {
        let value = row[this.query.search_column];
        for(var key in row){
          if(String(row[key]).indexOf(this.query.search_input) !== -1){
  
            // Return true required to populate table
            if(this.query.search_column.length &lt; 1) {
              return true;
            }
  
            // when condition gets here, The table shows 0 records
            if(this.query.search_operator == 'less_than') {
              return value &lt; this.query.search_input;
            }
  
          }
        }
      });
    }
  </code></pre>
  
  <p>The table get populated because of first <code>if()</code> but shows empty on second <code>if()</code>.</p>
  
  <p>What am i missing ?</p>