Vue.js编辑框创建问题：点击编辑时所有产品名称字段均激活

核心思路是用当前编辑产品的ID替代全局布尔值来控制编辑状态，只会激活对应ID的产品编辑框，不会影响其他项，同时无需为每条数据单独创建变量，完美适配大量数据场景。

1. 修改Data数据 #

把全局的editing布尔值替换为editingId，初始值设为null，表示当前无正在编辑的产品：

data() {
  return {
    editingId: null, // 存储当前正在编辑的产品ID
    tempValue: null
  }
}

2. 调整模板逻辑 #

修改模板显示判断条件，通过对比editingId和当前产品的id_product控制编辑框显示：

<ul>
  <li v-for="product in products" class="single-product" v-bind:key="product.id_product">
    <i style="color:#df4a49;padding:5px;" class="fa-solid fa-xmark fa-xl" @click="deleteProduct(product.id_product)"></i>
    <p class="product-name">
      <i @click="enableEditing(product.id_product, product.name)" class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>
      <!-- 未编辑状态：当前产品ID不等于editingId时显示 -->
      <span v-if="editingId !== product.id_product">{{product.name}}</span> 
      <!-- 编辑状态：当前产品ID等于editingId时显示 -->
      <span v-if="editingId === product.id_product"> 
        <input v-model="tempValue" class="input"/>
        <button @click="disableEditing">取消</button>
        <button @click="saveEdit(product.id_product)">保存</button>
      </span>
    </p>
    <!-- 注意：原代码中`produkt`是笔误，已修正为`product` -->
    <span class="product-localization"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Lokalizacja: </span>{{product.lokalizacja}}</span> 
    <span class="product-key"><span><i class="fas fa-edit" style="color:#0575ff;padding-right:5px;"></i>Klucz: </span>{{product.key}}</span>
    <hr />
  </li>
</ul>

3. 更新方法逻辑 #

调整方法，基于editingId处理编辑状态：

methods: {
  // 开启编辑：传入当前产品的ID和名称
  enableEditing(productId, productName) {
    this.tempValue = productName;
    this.editingId = productId;
  },
  // 取消编辑：重置editingId为null
  disableEditing() {
    this.tempValue = null;
    this.editingId = null;
  },
  // 保存编辑：根据ID找到对应产品并更新名称
  saveEdit(productId) {
    const targetProduct = this.products.find(item => item.id_product === productId);
    if (targetProduct) {
      targetProduct.name = this.tempValue;
    }
    this.disableEditing();
  }
}

关键说明 #

• 用editingId存储当前编辑产品的唯一标识，只有ID匹配的项才会显示编辑框，避免全局布尔值的冲突问题。
• 无需为每条数据单独创建状态变量，即使数据量达数千条也不会有性能问题。
• 修正了原模板中produkt.lokalizacja的拼写错误，避免渲染异常。

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