[英]Vue : Filter on array of object for search
I have an array having three objects and each object have straight key value pair. 我有一个有三个对象的数组,每个对象都有直键值对。
// 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;
});
}
}
It gives me the following exception : 它给了我以下例外:
TypeError: Cannot read property 'filter' of undefined
TypeError:无法读取未定义的属性“过滤器”
What Am i missing here. 我在这里失踪了什么。
You define model
as an empty object in your data
method. 您可以在
data
方法中将model
定义为空对象。
Even if you are setting the value of model
later, your filteredRow
method will fire when the component renders the template, meaning this.model.data
will be undefined
at that point. 即使您稍后设置
model
的值,您的filteredRow
方法也会在组件呈现模板时触发,这意味着this.model.data
将无法undefined
this.model.data
。
The simplest fix would be to give model.data
an initial value in the data
method: 最简单的解决将是给
model.data
在初始值data
的方法:
data() {
return {
model: { data: [] },
columns: {},
query: {
search_input: ''
},
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.