Vue中如何向预定义对象数组的首个空元素添加数据？

核心逻辑说明 #

当要添加的客户不存在时，执行以下操作：

• 定位数组中第一个**name为空（或未定义）**的元素位置
• 将输入的姓名和姓氏赋值给该位置的元素
• 可选：添加完成后清空输入框，优化用户体验

修改后的完整代码 #

<template>
  <input type="text" v-model="name" placeholder="姓名">
  <input type="text" v-model="surname" placeholder="姓氏">
  <button @click="addCustomer">添加/移除客户</button>
</template>

<script>
import Vue from "vue";

export default {
  data(){
    return{
      name: null,
      surname: null,
      customers: [{}, {}, {}],
      currentIndex: null
    }
  },
  methods:{
    addCustomer(){
      // 查找是否已存在同名客户
      const existingIndex = this.customers.findIndex(customer => customer.name === this.name);
      const isExist = existingIndex !== -1;

      if(isExist){
        // 移除客户：清空姓名和姓氏
        Vue.set(this.customers[existingIndex], 'name', null);
        Vue.set(this.customers[existingIndex], 'surname', null);
        this.currentIndex = existingIndex;
      }else{
        // 查找第一个空的客户位置
        const emptySlotIndex = this.customers.findIndex(customer => !customer.name);
        if(emptySlotIndex !== -1){
          // 添加客户到空位置
          Vue.set(this.customers[emptySlotIndex], 'name', this.name);
          Vue.set(this.customers[emptySlotIndex], 'surname', this.surname);
          // 清空输入框
          this.name = null;
          this.surname = null;
        }
      }
    }
  }
}
</script>

关键细节解释 #

• 空槽判断：!customer.name会匹配name为null、undefined或空字符串的元素，符合初始空对象的状态
• 响应式更新：使用Vue.set确保新增的name和surname属性能触发Vue的响应式渲染，避免界面不更新的问题
• 数据一致性：移除客户时同时清空surname，避免残留无效数据

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