vue遍历后端传递的集合并将部分状态不满住的过滤
时间: 2023-05-19 16:05:58 浏览: 87
vue 解决遍历对象显示的顺序不对问题
您可以使用Vue的computed属性和filter方法来遍历后端传递的集合并将部分状态不满足的过滤。具体实现方法可以参考以下代码:
<template>
<div>
<ul>
<li v-for="item in filteredList" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'item 1', status: 'active' },
{ id: 2, name: 'item 2', status: 'inactive' },
{ id: 3, name: 'item 3', status: 'active' },
{ id: 4, name: 'item 4', status: 'inactive' },
],
};
},
computed: {
filteredList() {
return this.list.filter((item) => item.status === 'active');
},
},
};
</script>
阅读全文