Vue.js：如何在v-for循环内单独切换表单？组件方案疑问

一、点击仅切换当前项的表单显示状态 #

你现在遇到的问题核心是用了一个全局的show变量，所有循环项的v-if都绑定同一个值，导致点击时所有表单同步切换。这里给你两种实用的解决思路：

方案1：给每个todo项添加独立状态属性

直接在每个todo对象里新增show属性，让每个项的显示状态完全独立：

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", show: false },
      { text: "Learn Vue", show: false },
      { text: "Play around in JSFiddle", show: false },
      { text: "Build something awesome", show: false }
    ]
  },
  methods: {
    toggle: function(todo) {
      todo.show = !todo.show
    }
  }
})

对应模板修改v-if的绑定目标：

<li v-for="(todo,key) in todos">
  <p>
    {{ key+1 }} - {{ todo.text}}
    <span @click="toggle(todo)"><b>Contact</b></span>
    <div v-if="todo.show">
      <hr />
      <p>
        <label>Message</label>
        <input type="text">
      </p>
      <hr />
    </div>
  </p>
</li>

方案2：用独立变量记录激活项（不修改原数据）

如果不想改动原todo数组的结构，可以用一个变量记录当前激活项的索引/唯一标识：

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome" }
    ],
    activeKey: null // 存储当前激活项的key
  },
  methods: {
    toggle: function(key) {
      // 点击当前激活项则关闭，否则切换到该项
      this.activeKey = this.activeKey === key ? null : key
    }
  }
})

模板里通过判断key是否匹配来控制显示：

<li v-for="(todo,key) in todos">
  <p>
    {{ key+1 }} - {{ todo.text}}
    <span @click="toggle(key)"><b>Contact</b></span>
    <div v-if="activeKey === key">
      <hr />
      <p>
        <label>Message</label>
        <input type="text">
      </p>
      <hr />
    </div>
  </p>
</li>

二、大量数据时：表单作为独立组件加载更合理 #

当循环数据量很大时，把表单拆成独立组件是更优的选择，原因如下：

• 作用域隔离：每个组件拥有独立的作用域，不会和父组件的循环逻辑耦合，避免变量污染和逻辑混乱。
• 性能优化：Vue的组件级虚拟DOM更新更高效，只有当前操作的表单组件会触发更新，不会重新渲染整个循环列表；还可以结合keep-alive缓存未激活的组件，减少重复渲染开销。
• 代码复用与维护：表单的输入验证、提交逻辑等可以封装在组件内，方便在其他场景复用，也更容易单独调试和维护。
• 懒加载支持：如果表单不是立即需要渲染，可以用异步组件方式懒加载，降低初始页面的加载压力。

举个简单的组件实现示例：

// 定义独立的表单组件
Vue.component('todo-contact-form', {
  props: ['todo'],
  data() {
    return {
      show: false,
      message: ''
    }
  },
  methods: {
    toggleForm() {
      this.show = !this.show
    },
    handleSubmit() {
      // 这里可以添加表单提交逻辑
      console.log(`给${this.todo.text}发送消息：${this.message}`)
      this.message = ''
      this.show = false
    }
  },
  template: `
    <div>
      <span @click="toggleForm"><b>Contact</b></span>
      <div v-if="show" class="form-container">
        <hr />
        <p>
          <label>Message</label>
          <input type="text" v-model="message">
          <button @click="handleSubmit">发送</button>
        </p>
        <hr />
      </div>
    </div>
  `
})

// 父组件
new Vue({
  el: "#app",
  data: {
    todos: [/* 大量数据 */]
  }
})

父组件模板中直接使用组件：

<li v-for="(todo,key) in todos">
  <p>{{ key+1 }} - {{ todo.text}}</p>
  <todo-contact-form :todo="todo"></todo-contact-form>
</li>

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