Question

我在桌面上有一个简单的搜索功能。但不知怎的，它不起作用，

我应该在搜索时在桌面上获得过滤行。

以下是代码：

// Search Input
 <div class="dv-header-search">
    <input type="text" class="dv-header-input"
      placeholder="Search"
      v-model="query.search_input">
  </div>

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

data() {
  return {
    model: { data: [] },
    columns: {},
    query: {
      search_input: ''
    },
  }
},

// Setting model after API call
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
})

computed: {
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
}

现在filteredRow拨打了page load，我在这里缺少什么。

Answer 1

```
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
```

should be 

```
  filteredRow: function(){
    return this.model.data.filter((row) => {
      // containOrNot should return bool
      return containOrNot(row, this.query.search_input)
    });
  }
```

Answer 2

filteredRow: function(){
    return this.model.data.filter((row) => {
     //i don't know you value key.. so just picking first property
     for(var key in row){
        return String(row[key]).indexOf(this.query.search_input);
       }
    });
  }

Vue：如何实现表搜索

2 个答案: