Vue：如何通过数组存储生成的div实现扩展功能？

嘿，你的思路完全没问题——用数组来管理这些可展开/最小化的div状态确实是最优方案之一，尤其适合你需要通过索引定位特定元素、批量操作的场景（比如选中除第一个外的所有最小化div）。数组能让你清晰追踪每个div的状态，方便后续扩展功能。

现有代码的核心问题 #

你当前的代码存在几个关键问题导致无法正常运行：

• 全局变量gate、expArray破坏了Vue的响应式数据管理，应该把这些状态移到组件内部
• v-for嵌套逻辑混乱，重复遍历displayDiv导致渲染错误
• expand方法没有正确接收索引参数，也没有正确切换对应元素的状态
• 高度样式绑定没有和单个div的状态关联，而是全局修改height属性

修正后的完整代码 #

下面是整合了你的需求（创建div、逐个切换状态、提升创建上限）的可运行代码：

HTML

<div id="lotsOfDivs">
  <addingdivs></addingdivs>
</div>

Vue.js

Vue.component('addingdivs', {
  template: `
    <div>
      <div id="header">
        <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
      </div>
      <!-- 遍历每个div的状态，index作为唯一标识 -->
      <div 
        class="div-container" 
        v-for="(item, index) in divStates" 
        :key="index"
      >
        <!-- 根据当前div的状态切换显示大/小容器 -->
        <div id="big" v-if="item.isExpanded">
          <div class="firstChild">
            <button class="done" @click="increaseLimit">INCREASE</button>
          </div>
          <div class="secondChild">
            <button class="done" @click="toggleExpand(index)">MINIMIZE</button>
          </div>
        </div>
        <div id="smal" v-else>
          <button class="done" @click="toggleExpand(index)">EXPAND</button>
        </div>
      </div>
    </div>
  `,
  data: function() {
    return {
      // 用数组存储每个div的状态，每个元素是一个对象，包含展开状态
      divStates: [],
      // 把gate移到组件内部，避免全局变量
      gate: 0
    }
  },
  methods: {
    // 切换指定索引div的展开状态
    toggleExpand: function(index) {
      this.$set(this.divStates, index, {
        isExpanded: !this.divStates[index].isExpanded
      });
    },
    // 创建新div，不超过gate限制
    createDiv: function() {
      if (this.divStates.length <= this.gate) {
        // 新创建的div默认是展开状态
        this.divStates.push({ isExpanded: true });
      }
    },
    // 提升可创建div的数量上限
    increaseLimit: function() {
      this.gate++;
    }
  }
});

new Vue({
  el: '#lotsOfDivs'
});

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#header {
  background: #30BFB7;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 2vh;
  margin-bottom: 2vh
}
#big {
  background: #207F7A;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 20vh;
  margin-bottom: 2vh
}
#smal {
  background: #10403D;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 2vh;
  padding-bottom: 2vh;
  margin-bottom: 2vh
}
.div-container {
  margin-bottom: 2vh;
}

关键改进点 #

1. 用数组divStates管理每个div的状态：每个元素是一个对象{ isExpanded: boolean }，通过索引精准控制单个div的展开/最小化，完全满足你后续批量操作的需求（比如筛选出所有isExpanded: false且索引>0的元素）
2. 移除全局变量：把gate移到组件内部，符合Vue的响应式数据管理规范，避免全局污染
3. 简化模板逻辑：每个div对应一个状态项，通过v-for直接遍历状态数组，避免嵌套循环的混乱
4. 独立的状态切换：toggleExpand方法接收索引参数，只修改对应div的状态，不会影响其他元素

后续功能扩展示例 #

如果你需要实现“选中除第一个外的所有最小化div”，可以添加一个方法：

getMinimizedDivsExceptFirst() {
  return this.divStates.slice(1).filter(item => !item.isExpanded);
}

内容的提问来源于stack exchange，提问作者josefdev