Vue:过滤用于搜索的对象数组

时间:2018-01-11 21:39:52

标签: javascript arrays object search vue.js

我有一个包含三个对象的数组,每个对象都有直键值对。

 // 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: {},
    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;
    });
  }
}

它给了我以下例外:

  

TypeError:无法读取未定义

的属性“过滤器”

我在这里失踪了什么。

1 个答案:

答案 0 :(得分:4)

您在data方法中将model定义为空对象。

即使您稍后设置filteredRow的值,您的this.model.data方法也会在组件呈现模板时触发,这意味着此时undefined将为model.data

最简单的解决方法是在data方法中为data() { return { model: { data: [] }, columns: {}, query: { search_input: '' }, } }, 提供初始值:

{{1}}