Vue.js中使用axios请求后如何优雅匹配遍历strIngredient开头的非空map键

你可以通过遍历接口返回的drink对象的所有键，配合正则匹配+空值过滤，动态生成配料数组，完全不需要手动枚举每个strIngredient字段。

核心修改逻辑 #

把父组件getData方法中map函数里的Ingredients字段替换为如下动态生成逻辑即可：

Ingredients: Object.entries(d)
  .filter(([key, value]) => {
    // 匹配strIngredient开头+数字后缀的键，同时排除null、空字符串等无效值
    return /^strIngredient\d+$/.test(key) && value != null && value.trim() !== ''
  })
  .map(([key, value]) => value)

Object.entries会把对象转换为[键, 值]格式的二维数组，先过滤出符合命名规则且有有效值的项，再提取值组成数组，不管API返回多少个strIngredient字段都能自动适配。

额外优化建议 #

1. 你当前代码中all_cocktails初始值定义为对象{}，但实际存储的是数组，建议改成初始值[]，避免渲染阶段出现报错
2. 子组件的props可以明确指定类型，减少类型异常：

props: {
  item: {
    type: Object,
    required: true
  }
}

3. 下拉框的v-for可以用配料值作为key，比index更稳妥：

<option
  v-for="(ingredient, index) in item.Ingredients"
  :key="ingredient"
  :value="ingredient"
>
  {{ ingredient }}
</option>

内容的提问来源于stack exchange，提问作者Naim R.