Buefy Autocomplete组件@input事件循环触发问题咨询

你遇到的核心问题是@input事件会同时响应用户手动输入和程序通过v-model修改值两种场景，导致互相触发形成循环。下面给你两种实用的解决思路：

方案一：使用用户交互专属事件 #

b-autocomplete提供了@select事件，只有当用户从下拉选项中选择条目时才会触发，程序修改v-model不会触发该事件。如果需要支持用户手动输入文本后的联动，可以搭配@blur事件（输入框失去焦点时触发）：

<template>
  <b-autocomplete
    v-model="code"
    :open-on-focus="true"
    @select="updateDescription"
    @blur="updateDescription"
  />
  <b-autocomplete
    v-model="description"
    :open-on-focus="true"
    @select="updateCode"
    @blur="updateCode"
  />
</template>

<script>
export default {
  data () {
    return {
      code: '',
      description: ''
    }
  },
  methods: {
    updateCode (description) {
      // 避免空值触发无效查找
      if (!description) return
      this.code = this.findCodeByDescription(description)
    },
    updateDescription (code) {
      if (!code) return
      this.description = this.findDescriptionByCode(code)
    },
    // 模拟实际查找逻辑
    findCodeByDescription(desc) {
      const data = [
        { code: '001', description: '产品A' },
        { code: '002', description: '产品B' }
      ]
      const item = data.find(item => item.description === desc)
      return item ? item.code : ''
    },
    findDescriptionByCode(code) {
      const data = [
        { code: '001', description: '产品A' },
        { code: '002', description: '产品B' }
      ]
      const item = data.find(item => item.code === code)
      return item ? item.description : ''
    }
  }
}
</script>

方案二：用标志位区分程序触发和用户触发 #

如果必须使用@input事件实现实时联动，可以添加一个标志位，标记当前是程序自动修改还是用户手动输入，在事件处理函数中跳过程序触发的逻辑：

<template>
  <b-autocomplete
    v-model="code"
    :open-on-focus="true"
    @input="handleCodeInput"
  />
  <b-autocomplete
    v-model="description"
    :open-on-focus="true"
    @input="handleDescriptionInput"
  />
</template>

<script>
export default {
  data () {
    return {
      code: '',
      description: '',
      isProgrammatic: false // 标记是否为程序自动修改
    }
  },
  methods: {
    handleCodeInput(code) {
      if (this.isProgrammatic) return
      // 标记为程序修改，避免循环触发
      this.isProgrammatic = true
      this.description = this.findDescriptionByCode(code)
      // 重置标志位
      this.isProgrammatic = false
    },
    handleDescriptionInput(description) {
      if (this.isProgrammatic) return
      this.isProgrammatic = true
      this.code = this.findCodeByDescription(description)
      this.isProgrammatic = false
    },
    // 模拟实际查找逻辑
    findCodeByDescription(desc) {
      const data = [
        { code: '001', description: '产品A' },
        { code: '002', description: '产品B' }
      ]
      const item = data.find(item => item.description === desc)
      return item ? item.code : ''
    },
    findDescriptionByCode(code) {
      const data = [
        { code: '001', description: '产品A' },
        { code: '002', description: '产品B' }
      ]
      const item = data.find(item => item.code === code)
      return item ? item.description : ''
    }
  }
}
</script>

两种方案对比：

• 方案一更简洁，利用组件原生事件区分用户交互，适合依赖下拉选择的场景；
• 方案二更灵活，支持实时输入联动，适合需要即时响应用户输入的场景。

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