我有一个像这样的对象数组(大陆):
data() {
return {
continents: [
{
name: "South America",
countries: [
{
name: "Paraguay"
},
{
name: "Chile"
}
]
},
{
name: "North America",
countries: [
{
name: "Costa Rica"
},
{
name: "Mexico"
}
]
}
]
}
}
// 6 continents and over 250 countries within.
我尝试使用v-model
'过滤器'过滤它像这样
computed: {
filtered() {
return this.continents.filter(continent => {
continent.countries = continent.countries.filter(country => {
return country.name.match(new RegExp(this.filter, 'i'));
});
return continent.countries.length;
});
}
}
使用v-for
指令渲染它:
<input v-model="filter" type="text">
<div v-for="continent in filtered" v-if="filtered.length" class="countries-group">
<h4>{{ continent.name }}</h4>
<ul class="country-list">
<li v-for="country in continent.countries" class="country-item">{{ country.name }}</li>
</ul>
</div>
它几乎可以正常工作,但我的计算属性过滤会修改原始国家/地区数据,所以当我尝试退格过滤器v-model
时,它不会返回原始数据,因为它已经覆盖了过滤后的对象。
答案 0 :(得分:2)
我的滤过的计算属性修改了原始的contries数据
你不应该这样做。不要修改计算属性中的状态,因为它可能会触发其他计算属性重新评估并导致混乱的错误。计算属性是纯函数,它以某种方式转换(不改变)组件的状态。
试试这个:
filtered() {
const filter = this.filter.toLowerCase();
return this.continents
.map(continent => Object.assign({}, continent, {
countries: continent.countries.filter(country => {
return country.name.toLowerCase().includes(filter);
}),
})
.filter(continent => continent.countries.length);
}