Vue.js 2中v-for循环内v-autocomplete的props绑定问题

嗨，作为Vue.js 2的新手遇到这个问题很正常，我来帮你捋清楚问题所在并给出解决办法～

你现在遇到的核心问题是所有v-autocomplete组件共享了同一个状态源，加上ref命名重复，导致它们的props互相干扰。下面是具体的分析和修正方案：

问题根源 #

1. v-model绑定了共用变量：你用v-model="loteClienteForm.cliente"，这个变量是全局的，不是每个lote对应的独立值，所以任何一个组件选中值变化，所有组件都会同步更新。
2. ref命名重复：:ref="'search'"会让循环里的所有组件都使用同一个ref名称，不仅后续无法单独操作某个组件，还可能让Vue在复用组件时出现状态混乱。

正确实现方式 #

1. 给每个lote分配独立的选中状态 #

首先，你需要给remate.lotes里的每个lote对象添加一个专属的选中字段，用来存储当前lote对应的客户选择。比如在获取到remate.lotes数据后，初始化这个字段：

// 在组件的mounted钩子或者数据获取完成后执行
this.remate.lotes.forEach(lote => {
  // 给每个lote添加独立的选中值存储字段
  lote.selectedCliente = null;
});

2. 修改模板绑定和ref #

在v-for循环里，把v-model绑定到当前lote的专属字段，同时给ref添加唯一标识（比如用循环索引或者lote的id），还要记得加上:key属性帮助Vue追踪组件状态：

<template v-for="(lote, index) in remate.lotes" :key="lote.id || index">
  <v-autocomplete
    :items="items"
    :ref="`search-${index}`" <!-- 每个组件的ref唯一 -->
    v-model="lote.selectedCliente" <!-- 绑定到当前lote的独立字段 -->
    :get-label="getClienteLabel" <!-- 替换成你的get-label方法 -->
    <!-- 其他需要的props -->
  />
</template>

3. 确保get-label方法的独立性 #

如果你的get-label方法依赖了外部变量，要确保它只处理当前传入的item，比如：

methods: {
  getClienteLabel(item) {
    // 只基于传入的item返回标签，不要依赖外部共用状态
    return item ? item.name : '';
  }
}

这样修改后，每个v-autocomplete组件都会维护自己的选中状态，不会再互相干扰啦～

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