Class Vue v-bind：在循环外部时初始化

我有一个通过json文件按类别筛选的文章列表。过滤器可以正常工作，但是有一个归档部分在json文件中没有值，并且在v-for循环之外。我正在寻找一种Vue方法，将活动类添加到归档过滤器中。我创建了一个（Vue过滤器json提要），您可以在这里看到我在做什么

Array.prototype.unique=function（）{
返回此.filter（函数（值、索引、self）{
返回self.indexOf（value）==索引；
});
}
var vm=新的Vue({
el:“#应用程序”，
数据：{
项目：[]，
错误：[]，
猫：[]，
联合项目：[]，
I：错，
catsCount:[]，
过滤数据项：[]，
选择编辑项：“事件”，
当前页面：0，
页面大小：6
},
创建（）{
axios
.得到(`https://codepen.io/struthy/pen/qgXJZJ.js`)
。然后（响应=>{
//JSON响应会自动解析。
this.items=response.data；
this.cats=this.items.map（item=>item.itemType）.unique（）；
//this.catscont=this.items.map（item=>item.itemType）.unique（）；
})
.catch（e=>{
这个。错误。推（e）；
});
},
计算：{
filteredPage:函数（）{
var itemSelectedType=this.selectedItem；
如果（this.selectedItem==“全部”）{
将此邮件退回
.排序（功能（a、b）{
返回新日期（a.已发布）-新日期（b.已发布）
})
.slice（0，（this.currentPage*this.pageSize）+this.pageSize）
}否则{
将此邮件退回
.排序（功能（a、b）{
如果（this.selectedItem！=“事件”）{
返回新日期（a.已发布）-新日期（b.已发布）
}
//否则{
//返回新日期（a.endDate）-新日期（b.endDate）
// }
})
.过滤器（功能（项目）{
return item.itemType==itemSelectedType；
}).slice（0，（this.currentPage*this.pageSize）+this.pageSize）；
}
}，//结束筛选器页面
showMore:function（）{
var itemSelectedType=this.selectedItem；
if（this.items.filter）（函数（项）{
return item.itemType==itemSelectedType
}).length>（this.pageSize*（this.currentPage+1）））{
返回true；
}else if（this.items.length>（this.pageSize*（this.currentPage+1）））{
return true；//这是所有或未筛选的项
}
否则{
返回false；
}
}，//结束showMore
}，//结束计算
方法：{
//为筛选器项指定一个活动类
activeItem：功能（类别）{
如果（this.selectedItem==类别）{
返回“isActive”
}否则{
返回“”
}
}，//结束活动项
///正在尝试将活动类添加到存档链接-尚未成功
activeAllItem:function（）{
var allCategory=this.cats
如果（this.selectedItem==！allCategory）{
return isActive==true
}否则{
return isActive==true
}
}//结束活动项
}
});
.grid{
显示器：flex；
柔性包装：包装；
列表样式：无；
保证金：0；
填充：0；}
.grid—之间的空间{
对齐内容：间隔；}
.网格--已满{
宽度：100%；}
.网格--第三{
宽度：计算（100%/12*4）；}
.grid--2第三{
宽度：计算（100%/12*8）；}
@仅介质屏幕和（最大宽度：768px）{
.grid--2第三{
宽度：100%；}
.grid\u容器{
填充顶部：60px；
填充底部：60px；
边框顶部：1px实心#e3；
显示器：flex；
flex-wrap:wrap；}
.grid__容器--左右填充{
左侧填充：7.03125%；
右边填充：7.03125%；}
.grid\u容器--之间的空间{
对齐内容：间隔；}
.grid\uuu col{
宽度：32%；
显示器：flex；
最小高度：330px；
页边距底部：20px；}
@仅介质屏幕和（最大宽度：1100px）{
.grid\uuu col{
宽度：49%；}
@仅介质屏幕和（最大宽度：640像素）{
.grid\uuu col{
宽度：100%；}
.grid\uuu col--一半{
宽度：48%；}
.grid\uuu col—半个h2{
填充：20px 0；}
@仅介质屏幕和（最大宽度：768px）{
.grid\uuu col--一半{
宽度：100%；}
.grid\uuu col--边框{
边缘底部：60px；
边框底部：4px实心#002A48；
填充底部：60px；}
.grid\uuu col--列{
伸缩方向：列；}
.grid\uu img{
自对齐：flex start；}
.grid\uuu箭头链接{
字号：2rem；
字体系列：“Poppins”，无衬线；
字体大小：粗体；
位置：相对位置；
宽度：适合内容；}
.grid__箭头链接：之后{
内容：“；
位置：绝对位置；
右：-32px；
顶部：10px；
宽度：28px；
高度：10px；
背景：url（../assets/img/ream more blue.png）中心不重复；}
.网格盒{
背景尺寸：封面；
背景位置：中心；
显示器：flex；
身高：100%；
宽度：100%；
弯曲方向：立柱；
证明内容：柔性端；
位置：相对位置；
溢出：隐藏；}
.grid\u框：悬停p{
颜色：#6CB7E3；}
.grid__u框--变量{
背景色：#6CB7E3；
颜色：#fff；
对齐内容：间隔；}
.grid\uuuu框--变量：悬停{
背景色：#57addf；}
.grid_uuu框--变量：悬停p{
颜色：#fff；}
.grid__bg-img{
背景尺寸：封面；
背景位置：中心-50px；
显示器：flex；
身高：100%；
宽度：100%；
弯曲方向：立柱；
证明内容：柔性端；
变换：比例（1）；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
转换：所有0.3都易于输入输出；}
.grid__bg-img：悬停{
转换：比例（1.1）；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o型过渡：所有0.3s e