如何将子组件首个输入值推入父组件expensesKey数组并对接Express API

我来帮你搞定这个问题！你的核心需求是把子组件第一个输入框的内容同步到父组件的expensesKey数组，最后把expensesKey和expensesValue组成键值对发给后端。现在代码里有几个小问题，我一步步帮你修正：

1. 先清理子组件的冗余配置 #

子组件里定义的eKey props完全没必要——咱们是子组件向父组件传值，不是父传子，直接删掉这个props就行。另外把第一个输入框的$emit参数改成和第二个一致的格式，带上id，这样父组件能精准知道要更新数组的哪个位置：

<template>
  <div class="input">
    <input type="text" placeholder="Expense" @input="$emit('eKey', { value: $event.target.value, id })" />
    <input type="number" placeholder="Amount" @input="$emit('input', { value: $event.target.value, id })" />
  </div>
</template>
<script>
export default {
  name: "formInput",
  props: {
    id: Number
  }
};
</script>

2. 父组件正确同步expensesKey数组 #

原来的@ekey="ekey = $event"完全不对，咱们得新增一个方法来处理子组件传过来的键值，还要在添加/删除输入框时同步维护expensesKey数组：

首先修改data和方法部分

data() {
  return {
    count: 0,
    earnings: "",
    expensesValue: [],
    expensesKey: [],
    totalExpense: ""
  };
},
methods: {
  addInputs: function() {
    this.count++;
    this.expensesValue[this.count - 1] = 0;
    this.expensesKey[this.count - 1] = ""; // 初始化对应的键值，避免undefined
  },
  deleteInputs: function() {
    if (this.count <= 0) return; // 防止减到负数报错
    this.count--;
    this.expensesValue.pop();
    this.expensesKey.pop(); // 同步删除对应的键
    this.setTotalExpense();
  },
  getExpenseValue(data) {
    this.expensesValue[data.id] = parseInt(data.value, 10) || 0;
    this.setTotalExpense();
  },
  // 新增处理键值的方法
  getExpenseKey(data) {
    this.expensesKey[data.id] = data.value;
  },
  setTotalExpense() {
    this.totalExpense = this.expensesValue.reduce((sum, val) => sum + val, 0);
  },
  // 修改提交方法，组合键值对
  submitBudget() {
    // 把键和值组合成对象，可选过滤空键/0值（根据你的后端需求调整）
    const expensePairs = {};
    this.expensesKey.forEach((key, index) => {
      if (key && this.expensesValue[index] > 0) {
        expensePairs[key] = this.expensesValue[index];
      }
    });

    axios
      .post("http://localhost:3000/budget", {
        earning: this.earnings,
        expenses: expensePairs // 传组合后的键值对对象，而不是单独的数组
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(e => {
        console.error(e);
      });
  }
}

然后修改模板里的组件绑定

把原来的@ekey="ekey = $event"改成绑定咱们新增的getExpenseKey方法：

<form-input 
  v-for="(n,idx) in count" 
  :key="n" 
  :id="idx" 
  @ekey="getExpenseKey" 
  @input="getExpenseValue"
></form-input>

关键改动总结 #

• 子组件去掉冗余的eKey props，传值时带上id确保定位准确
• 父组件新增getExpenseKey方法，同步更新expensesKey数组
• 添加/删除输入框时同步维护expensesKey，避免数组长度不匹配
• 提交请求时把两个数组组合成键值对对象，符合后端API的接收需求

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