Vue3中如何实现点击按钮逐次向数组添加对象直至累计5个

原有实现写死了i从0到i<5的循环逻辑，每次函数触发都会循环执行5次赋值操作，所以点击一次就会直接生成5个对象，不符合逐次新增的要求。

不需要保留for循环，直接以数组当前长度作为判断依据，每次触发函数时仅做单条新增判断即可：

• 函数触发后先校验当前数组长度，若已达到5条直接终止逻辑，不执行新增
• 长度不足5条时，仅向数组末尾追加1个目标对象
• 可选优化：给按钮绑定动态禁用状态，数组满5条时禁止点击，提升交互体验

import { ref } from 'vue'
// 原有响应式数组定义无需修改
const featureObjArray = ref([])

const addFeatureObjs = () => {
  // 满5条直接退出，不再执行新增
  if (featureObjArray.value.length >= 5) return
  // 每次仅追加1个对象
  featureObjArray.value.push({ id: null, feature: null })
}

对应模板部分的优化写法：

<template>
  <button 
    @click="addFeatureObjs" 
    :disabled="featureObjArray.length >= 5"
  >
    新增特征项
  </button>
  <span v-if="featureObjArray.length >= 5" class="tip-text">
    最多可添加5个特征项
  </span>
</template>

• 不需要额外维护计数变量，直接复用数组自带的length属性做判断，不会出现索引错位、计数不同步的问题
• 替换原来的索引赋值写法为push追加，完全贴合逐次新增的业务场景，不会覆盖数组内已有的已编辑内容
• 边界判断完善，无论触发多少次函数，数组长度都不会超过5的上限

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