如何用v-model同时绑定两个值？基于Buefy <b-autocomplete>组件

遇到这种v-for循环里需要绑定多个字段拼接值的情况，确实没法直接用v-model绑定函数，我给你几个实际项目里验证过的可行方案，你可以根据需求选：

方案一：手动绑定value + 监听输入事件（最直接） #

v-model本质是value属性绑定 + input事件监听的语法糖，我们可以手动拆开处理：直接把拼接后的全名绑定到value，然后监听输入事件拆分更新对应的first_name和last_name：

模板代码 #

<b-autocomplete
  :value="`${list[index].first_name} ${list[index].last_name}`.trim()"
  @input="updateFullName($event, index)"
  <!-- 其他必填属性，比如placeholder、suggestions等 -->
></b-autocomplete>

方法实现 #

methods: {
  updateFullName(inputValue, index) {
    // 按空格拆分全名，可根据需求调整逻辑（比如处理多空格、无空格的情况）
    const nameParts = inputValue.trim().split(/\s+/)
    const firstName = nameParts[0] || ''
    const lastName = nameParts.slice(1).join(' ') || ''

    // 用$set保证响应式更新
    this.$set(this.list, index, {
      ...this.list[index],
      first_name: firstName,
      last_name: lastName
    })
  }
}

如果需要支持选择建议项，再加个@select事件处理选中后的赋值：

<b-autocomplete
  :value="`${list[index].first_name} ${list[index].last_name}`.trim()"
  @input="updateFullName($event, index)"
  @select="handleSelectSuggestion($event, index)"
  :suggestions="yourSuggestionsList"
></b-autocomplete>

handleSelectSuggestion(selectedItem, index) {
  // 假设建议项包含first_name和last_name字段
  this.$set(this.list, index, {
    ...this.list[index],
    first_name: selectedItem.first_name,
    last_name: selectedItem.last_name
  })
}

方案二：封装子组件（更优雅，适合复用） #

如果这个场景在项目里多次出现，把单个autocomplete封装成子组件会更清晰，利用计算属性的get/set来同步全名和拆分字段：

子组件（FullNameAutocomplete.vue） #

<template>
  <b-autocomplete
    v-model="fullName"
    :suggestions="suggestions"
    placeholder="输入全名"
    <!-- 其他可配置属性 -->
  ></b-autocomplete>
</template>

<script>
export default {
  props: {
    firstName: {
      type: String,
      default: ''
    },
    lastName: {
      type: String,
      default: ''
    },
    suggestions: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    fullName: {
      // 获取拼接后的全名
      get() {
        return `${this.firstName} ${this.lastName}`.trim()
      },
      // 输入变化时拆分并通知父组件更新字段
      set(newValue) {
        const nameParts = newValue.trim().split(/\s+/)
        this.$emit('update:firstName', nameParts[0] || '')
        this.$emit('update:lastName', nameParts.slice(1).join(' ') || '')
      }
    }
  }
}
</script>

父组件使用 #

<full-name-autocomplete
  v-for="(item, index) in list"
  :key="index"
  :first-name.sync="item.first_name"
  :last-name.sync="item.last_name"
  :suggestions="yourSuggestions"
></full-name-autocomplete>

这个方案把拆分逻辑封装在子组件里，父组件只需要传递和同步字段，代码更干净，后续修改拆分规则也更方便。

方案三：给列表项添加临时全名字段（适合简单场景） #

如果你的列表项可以修改，也可以初始化时给每个项添加full_name字段，用watch监听它的变化来同步first_name和last_name：

初始化列表 #

// 假设原始list从接口获取
this.list = rawList.map(item => ({
  ...item,
  full_name: `${item.first_name} ${item.last_name}`.trim()
}))

添加watch监听 #

watch: {
  list: {
    deep: true,
    handler(newList) {
      newList.forEach(item => {
        const nameParts = item.full_name.trim().split(/\s+/)
        item.first_name = nameParts[0] || ''
        item.last_name = nameParts.slice(1).join(' ') || ''
      })
    }
  }
}

模板使用 #

<b-autocomplete
  v-model="list[index].full_name"
  :suggestions="yourSuggestions"
></b-autocomplete>

注意：这个方案的深度监听如果遇到大列表可能有性能影响，小列表用起来没问题。

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