javascript - Vue : Implementing Vue table search

Question

我在 vue 模板中有一个表格，搜索不起作用，不知道我错过了什么。

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

还有表格:

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

还有 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);
          }
        });
      }
    }
  }

在filteredRow中，我console.log(String(row[key]).indexOf(this.query.search_input))'这给了我30乘以 0。

我缺少什么以及最好的方法是什么。

Answer 1

for 循环永远不会越过行中的第一个键。仅当找到字符串时才返回 true:

  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;
    });
  }