Vue 在深度数组中显示更多答案

【问题标题】：Vue Show more in deep arrayVue 在深度数组中显示更多
【发布时间】：2021-03-05 16:53:53
【问题描述】：

我正在尝试向数组 (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个项目->显示4个项目+“显示更多”

但是 - recruiter.id in cities_expand 不起作用/更新？

我确信有更好的方法来解决这个问题 - 但没有想到其他方法 :) 有什么想法吗？

【问题讨论】：

我没有看到任何与 Vue 或 js 相关的更好的解决方案
谢谢 - 但奇怪的是......它不起作用。即使city_expand 有recruiter.id，它也没有显示所有城市。更奇怪的是：如果我点击“显示更多”的垃圾邮件，它最终会更新..
请分享一个可复制的例子
您是在讨论未显示的单独代码中的城市扩展的渲染吗？很明显，recruiter.id in cities_expand 行不会再次呈现，因为您没有更改 recruiters.data，因此它不会再次触发此循环
黑客将是:key="recruiter.id + JSON.stringify(cities_expand)"

标签： arrays vue.js vuejs2

【解决方案1】：

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

所以在执行recruiter.id in cities_expand 时，它会检查recruiter.id 是否是数组cities_expand 中的一个键。数组的键是数组索引。

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

【讨论】：