Vue表单数组对象audId更新异常：新增属性而非批量更新求助

问题核心是你把<b-form-select>的v-model直接绑定到了选中数据数组上，导致选中的audId被当作数组的新属性添加，而非更新数组内每个对象的对应字段。以下是具体解决方案：

解决步骤 #

• 单独维护一个临时变量，用来存储从下拉框选中的audId值
• 提交表单时，遍历选中数据数组，逐个更新每个对象的audId字段
• 确保响应式更新（Vue2需注意对象属性的响应式处理，Vue3无需额外操作）

示例代码 #

Template部分 #

<template>
  <b-form>
    <b-form-select
      v-model="selectedAudId"
      :options="audIdOptions"
      placeholder="请选择audId"
    ></b-form-select>
    <b-button type="submit" @click.prevent="handleSubmit">提交</b-button>
  </b-form>
</template>

Script部分（Vue3） #

<script setup>
import { ref } from 'vue'

// 选中的数据数组
const selectedItems = ref([
  { name: 'Green', audId: 11 },
  { name: 'Red', audId: 11 }
])
// 临时存储选中的audId
const selectedAudId = ref('')
// audId可选选项
const audIdOptions = ref([
  { value: 13, text: 'audId 13' },
  { value: 14, text: 'audId 14' }
])

const handleSubmit = () => {
  // 遍历数组，更新每个对象的audId
  selectedItems.value.forEach(item => {
    item.audId = selectedAudId.value
  })
  // 这里添加提交到后端的逻辑
  console.log('更新后的数据:', selectedItems.value)
}
</script>

Script部分（Vue2） #

<script>
export default {
  data() {
    return {
      selectedItems: [
        { name: 'Green', audId: 11 },
        { name: 'Red', audId: 11 }
      ],
      selectedAudId: '',
      audIdOptions: [
        { value: 13, text: 'audId 13' },
        { value: 14, text: 'audId 14' }
      ]
    }
  },
  methods: {
    handleSubmit() {
      this.selectedItems.forEach(item => {
        // 若audId是对象原有字段，直接赋值即可
        item.audId = this.selectedAudId
        // 若audId是新增字段，需用$set确保响应式：this.$set(item, 'audId', this.selectedAudId)
      })
      console.log('更新后的数据:', this.selectedItems)
    }
  }
}
</script>

说明 #

之前的错误写法会把下拉框选中的值直接绑定到数组对象上，JavaScript中数组本质也是对象，所以audId会被添加成数组的一个额外属性。通过临时变量存储选中值，再遍历更新数组内每个对象的方式，就能实现你想要的统一更新效果。

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