Vue：实现 Vue 表搜索

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