Vue实现输入框与标签切换：点击新增显输入，展开后显标签

我来帮你搞定这个需求，核心思路是给每个生成的div单独维护输入框的显示状态，这样就不会出现所有div同步切换的问题，完全匹配你要的效果：点击新增按钮时显示输入框，div展开到最大化时切换为标签，其余情况都显示标签。

先说说原代码的小问题 #

你之前用了组件级的InputFieldInfo状态，这会导致所有生成的div共用同一个状态，点一个所有都切换，这显然不是你想要的。咱们把状态移到每个div的对象里，让每个div自己说了算！

修正后的完整实现 #

HTML部分

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

Vue代码

var gate = 0;

Vue.component('addingdivs', {
  template: `
    <div>
      <div id="header">
        <button class="addDiv" type="button" @click="createDiv">ADD LOCATION</button>
      </div>
      <div class="parent" v-for="div in divs" :key="div.id" :style="div.height ? { 'height': div.height } : null">
        <!-- 展开状态（最大化） -->
        <div class="big" v-if="div.expanded">
          <div class="switch">
            <!-- 仅当前div的showInput为true时显示输入框 -->
            <input type="text" v-if="div.showInput" placeholder="输入地点...">
            <label class="propertyLabel" v-else>
              <div class="firstChild">
                <button class="done" @click="increaseLimit">INCREASE</button>
              </div>
              <div class="secondChild">
                <button class="done" @click="expand(div)">COLLAPSE</button>
              </div>
            </label>
          </div>
        </div>
        <!-- 收起状态 -->
        <div class="small" v-else>
          <button class="done" @click="expand(div)">EXPAND</button>
        </div>
      </div>
    </div>
  `,
  data() {
    return {
      count: 0,
      divs: []
    }
  },
  methods: {
    expand(div) {
      if (div.expanded) {
        // 收起时保持标签显示
        div.expanded = false;
        div.height = '';
      } else {
        // 展开到最大化时，立刻切换为标签
        div.expanded = true;
        div.height = '7vh';
        div.showInput = false; // 关键：展开后隐藏输入框
      }
    },
    createDiv() {
      if (this.count <= gate) {
        this.divs.push({
          id: this.count,
          expanded: true, // 新创建的div默认展开
          showInput: true, // 刚创建时显示输入框
          height: '7vh'
        });
        this.count++;
      }
    },
    increaseLimit() {
      gate++;
    }
  }
});

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

核心逻辑解释 #

1. 独立状态管理：每个div对象都有自己的showInput和expanded属性，各自控制自己的显示状态，互不干扰，这是解决问题的关键。
2. 新增时的状态：点击ADD LOCATION生成新div时，把showInput设为true，所以输入框会立刻显示。
3. 展开时的切换：当点击EXPAND把div切换到最大化状态时，直接把showInput改成false，输入框就会隐藏，标签显示。之后不管是收起还是再次展开，都只会显示标签，完美符合你“仅在新增时显示输入框”的要求。
4. 交互优化：我把展开状态下的按钮文字改成了COLLAPSE，这样用户操作起来更直观，不会混淆。

这个方案逻辑清晰，状态管理精准，完全适配你的需求场景，而且后续维护起来也很方便~

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