Vue 2.6.10中v-for内自定义自动补全下拉控件无法渲染

问题根因 #

硬编码控件能正常工作，是因为初始化逻辑在组件首次挂载时就完成了；而v-for循环里的控件属于动态渲染/复用的组件，原初始化逻辑可能只执行了一次，导致DOM更新后没有重新绑定jQuery UI的autocomplete，因此缺失ui-autocomplete-input类和autocomplete="off"属性。

具体修复方案 #

1. 扩展组件的初始化时机
   把autocomplete的初始化逻辑抽成独立方法，同时在mounted和updated钩子中调用，确保组件每次渲染（包括动态更新）都能触发初始化：

<script>
export default {
  props: ['relatedData'],
  mounted() {
    this.initLookupAutocomplete()
  },
  updated() {
    this.initLookupAutocomplete()
  },
  methods: {
    initLookupAutocomplete() {
      const input = this.$el.querySelector('input.ned-lookup-input')
      // 避免重复初始化，减少性能消耗
      if (input?.classList.contains('ui-autocomplete-input')) return
      
      // 替换成你email.js里的初始化逻辑
      $(input).autocomplete({
        source: '/api/user-search', // 示例数据源
        minLength: 2,
        select: (event, ui) => {
          // 自定义选中逻辑
          this.$emit('user-selected', ui.item)
        }
      }).attr('autocomplete', 'off')
    }
  }
}
</script>

2. 确保v-for的key唯一且稳定
   确认v-for的key使用循环项的唯一标识（比如用户ID）而非索引：

<template>
  <div v-for="item in itemList" :key="item.uniqueId">
    <ned-lookup :data="item"></ned-lookup>
  </div>
</template>

用索引当key会导致组件复用，新数据渲染时不会触发完整生命周期，容易引发初始化遗漏。

3. 监听props变化触发重初始化
   如果控件依赖父组件传递的props，通过watch监听props变化，在数据更新后重新初始化：

<script>
export default {
  // ...其他代码
  watch: {
    relatedData: {
      handler() {
        // 用$nextTick确保DOM更新完成后再执行
        this.$nextTick(() => {
          this.initLookupAutocomplete()
        })
      },
      deep: true // 若props是对象/数组，开启深度监听
    }
  }
}
</script>

额外检查点 #

• 打开浏览器控制台，确认v-for循环生成的input元素有没有被正确选中并初始化，是否存在报错信息；
• 检查email.js中的初始化逻辑是否有全局绑定限制（比如只绑定页面上第一个input），如果是，改成针对每个控件实例单独绑定。

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