Vue: Implementing Vue table search

Question

I have a table in vue template, The search is not working, Don't know what i missed.

<input type="text" class="dv-header-input" v-model="query.search_input"
  @keyup.enter="fetchRecords()">

And the table :

<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

And the JS :

  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) => {
        for(var key in row){
            return String(row[key]).indexOf(this.query.search_input);
          }
        });
      }
    }
  }

In filteredRow, I console.log(String(row[key]).indexOf(this.query.search_input))' which gives me 30 times 0.

What am i missing and whats the best approach.

that for loop is never going to get past the first key in row — Jeff
– Jeff, Commented Jan 12, 2018 at 13:09

Jeff · Accepted Answer · 2018-01-12 13:14:26Z

3

That for loop is never going to get past the first key in row. You want to return true only if you find the string:

  filteredRow: function(){
    return this.model.data.filter((row) => {
      for(var key in row){
        if(String(row[key]).indexOf(this.query.search_input) !== -1){
          return true;
        }
      }
      return false;
    });
  }

answered Jan 12, 2018 at 13:14

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeff Over a year ago

@Gammer no problem. indexOf returns -1 when it doesn't find the string, you can't use it as a boolean because it returns 0 if the string is found at the first character

Gammer Over a year ago

Make sense, Perfect. filteredRow will work for conditional based filter ?, Means select a table column from drop down then select an operator from another dropdown like = and then type the number you want to search against that column ?

Jeff Over a year ago

You would have to write some new code for that since this one is only a string filter

Collectives™ on Stack Overflow

Vue: Implementing Vue table search

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related