To solve the problem now is that too much background to my data, and I all displayed on the page, then it too much, therefore, is a plus for a change button, each click will change five different data
First: On the page
<div class="identify" v-if="item.behaviorList.length>0">
<div style="display: flex;justify-content: space-between">
<p>相关行为</p>
<div class="change" @click="change_data(item)"><img src="@/assets/img/change.png" class="magnifier">换一换</div>
</div>
<span v-for="(info,index) in item.behaviorListFive " :key="item +displayname"
style="cursor:pointer"
@click="searchChildProblem(info)" >
<img src="@/assets/img/big.png" class="magnifier">
<span style="color: #0f7ffe;font-size: 14px">{
{info.displayname }}</span>
</span>
<i class="bottom-line"></i>
</div>The second is to process data from the background
watch: {
searchResult(searchResultValue) {
//相关行为
//取item.behaviorList前5个数据,放到新字段item.behaviorListFive
item.behaviorListFive = []
item.behaviorListPage = 1 //当前是1页
item.behaviorList.forEach((m,n)=>{
if(n<5){
item.behaviorListFive.push(m)
}
})
// 相关推荐
item.suggestListFive = []
item.suggestListPage = 1 //当前是1页
item.suggestList.forEach((m,n)=>{
if(n<5){
item.suggestListFive.push(m)
}
})
})
}
this.pageRecode = arr;//行为和科目数组
}
},The main code here is // the part of related behavior
The third step is the method
/**
* item一级的数据 相关行为
* */
change_data (item) { //每次点击换一批触发这个方法
let arr = item.behaviorList//换一换的总数据
let page = item.behaviorListPage //页码
let tol_num = arr.length //总数据有多少个
//如果总共数量小于等于5条数据，换一换没有数据了,
if (tol_num <= page*5) {
//如果没有数据就从第一页开始
this.pageRecode.forEach(mmm=>{
if(mmm == item){
mmm.behaviorListFive = []
mmm.behaviorListPage = 1 //页码=1
mmm.behaviorList.forEach((n,i)=>{
if(i<5 ){ //回到初始化
mmm.behaviorListFive.push(n)
}
})
}
})
}else{
page++
//更改数据
this.pageRecode.forEach(mmm=>{
if(mmm == item){
mmm.behaviorListFive = []
mmm.behaviorListPage++ //页码增加1
mmm.behaviorList.forEach((n,i)=>{
if( i<page*5 && i>=(page-1)*5 ){ //5-9 用page==2代入
mmm.behaviorListFive.push(n)
}
})
}
})
}
//刷新
this.uploadDiv = false;
this.$nextTick(()=>{
this.uploadDiv = true;
})
},Mainly look at the method