Vue在深度阵列中显示更多

Question

我正在尝试添加一个"显示更多"；按钮指向数组(v-for(的数组(v-for(。

<li v-for="(recruiter, key) in recruiters.data" :key="recruiter.id">
<div v-if="recruiter.cities" >
<div v-if="recruiter.cities.length <= 5 || recruiter.id in cities_expand">
<a :href="'/rekryterare/' + city.slug" v-for="(city, index) in recruiter.cities">{{ city.name }}</a>
</div>
<div v-else>
<template v-for="(city, index) in recruiter.cities">
<template v-if="index+1 <= 4">
<a :href="'/rekryterare/sverige/' + city.slug" >{{ city.name }}</a>
</template>
</template>
<a href="#" @click.prevent="cities_expand.push(recruiter.id)" >...</a>
</div>
</div>
</li>

基本上如果recruiter.cities->显示4个项目+"；显示更多"；

但是，recruiter.id in cities_expand不工作/更新？

我相信有更好的方法来解决这个问题，但没有想到其他事情：(有什么想法吗？

Answer 1

我怀疑问题出在运算符中使用了js。in操作符检查对象中是否有键它不检查数组是否有值。

因此，当执行recruiter.id in cities_expand时，这将检查recruiter.id是否是数组cities_expand中的密钥。数组的键是数组索引。

这可以解释为什么垃圾邮件点击会起作用，因为如果recruiter.id是例如9，那么只有当cities_expand具有密钥9，即长度10时，recruiter.id in cities_expand才会为真。这意味着您必须单击...10次。

更改

<div v-if="recruiter.cities.length <= 5 || recruiter.id in cities_expand">

至

<div v-if="recruiter.cities.length <= 5 || cities_expand.indexOf(recruiter.id) > -1 ">

应该做到这一点。

---

就替代解决方案而言，我会将内部循环封装在组件中，并为列表使用计算值。例如

组件RecruiterCities:

<template>
<div v-if="displayCities" >
<a :href="'/rekryterare/' + city.slug" v-for="(city, index) in displayCities" :key="index">{{ city.name }}</a>
<a v-if="!showExpanded && totalCities > maxDisplayCities" href="#" @click.prevent="showExpanded = true" >...</a>
</div>
</template>
<script>
export default {
props: {
recruiterCities: {
type: Array,
default() {
return []
}
}
},
data() {
return {
showExpanded: false,
maxDisplayCities: 4
}
},
computed: {
totalCities() {
return (this.recruiterCities && this.recruiterCities.length) || 0;
},
displayCities() {
if (!this.recruiterCities) {
return [];
}
if (this.showExpanded || this.recruiterCities.length <= this.maxDisplayCities) {
return this.recruiterCities;
}
return this.recruiterCities.slice(0, this.maxDisplayCities);
}
}
}
</script>

并使用它：

<li v-for="(recruiter, key) in recruiters.data" :key="recruiter.id">
<RecruiterCities :recruiter-cities="recruiter.cities"/>
</li>