Question

子组件中有两个输入，但重点是第一个输入发出eKey 的输入。指定数量的第二个输入运行正常。

在父组件中，我希望将第一个输入的输入值推入在data()部分中设置的 epensesKey 数组中。

注意：更大的前景是我将POST和Express Api数组作为键/值对发送给expenseKey的{{1}}请求

>

子组件

expenseValue

父组件

<template>
  <div class="input">
    <input
      type="text"
      placeholder="Expense"
      @input="$emit('eKey', $event.target.value)"
    />
    <input
      type="number"
      placeholder="Amount"
      @input="$emit('input', { 
        value: $event.target.value,
        id
      })"
    />
  </div>
</template>

<script>
export default {
  name: "formInput",
  props: {
    id: Number,
    eKey: Array
  }
};
</script>

Answer 1

因此在父母中，您可以这样：

<template>
  <div class="container">
    <h1>Budget Form</h1>

    <div class="form">
      <form action>
        <div class="topForm">
          <label for="monthlypay">Monthly pay</label>
          <input type="number" name="monthlypay" id="monthlypay" v-model="earnings">
        </div>
      </form>

      <h2>Expenses</h2>
      <form-input
        v-for="(n,idx) in count"
        :key="n"
        :id="idx"
        :e-key="expensesKey"
        @eKey="setExpenseKey"
        @input="getExpenseValue"
      ></form-input>

      <button @click="addInputs">Add Expense</button>
      <button @click="deleteInputs">Delete</button>
      <button type="button" @click="submitBudget">Submt</button>

      <p>Total Monthly Income: {{ earnings }}</p>
      <p>Total Expense: {{ totalExpense }}</p>
      <p>Money left: {{ getDifference }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import formInput from "./components/Input.vue";

export default {
  components: {
    "form-input": formInput
  },
  name: "form",
  data() {
    return {
      count: 0,
      earnings: "",
      expensesValue: [],
      expensesKey: [],
      totalExpense: ""
    };
  },
  methods: {
    addInputs: function() {
      this.count++;
      this.expensesValue[this.count - 1] = 0;
      this.expensesKey[this.count - 1] = "default";
    },
    deleteInputs: function() {
      if (this.count < 1) {
        return;
      }

      this.count--;
      this.expensesValue.pop();
      this.expensesKey.pop();

      this.setTotalExpense();
    },
    getExpenseValue(data) {
      this.expensesValue[data.id] = parseInt(data.value, 10) || 0;
      this.setTotalExpense();
    },
    setExpenseKey(data) {
      this.expensesKey[data.id] = data.value || "default";
    },
    setTotalExpense() {
      console.log(this.expensesValue);

      this.totalExpense = this.expensesValue.reduce((sum, val) => {
        return sum + val;
      }, 0);
    },
    mergeKeyAndValue() {
      return this.expensesKey.reduce((acc, key, index) => {
        return [...acc, { [key]: this.expensesValue[index] }];
      }, []);
    },
    submitBudget() {
      const expenses = this.mergeKeyAndValue();

      axios
        .post("http://localhost:3000/budget", {
          earning: this.earnings,
          expenses
        })
        .then(response => {
          console.log(response.data);
        })
        .catch(e => {
          console.error(e);
        });
    }
  },
  computed: {
    getDifference() {
      return this.earnings - this.totalExpense;
    }
  }
};
</script>

在孩子中，您可以这样做：

<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,
    eKey: Array
  }
};
</script>

请注意，我还添加了一个函数，该函数将在发布数据之前将key和values配对。（我还添加了其他一些小的改进）。

您可能需要调整一些内容以适合您的需求。

如果您有任何疑问，请告诉我。

如何将输入值从自定义输入组件推入父组件的数组中？

1 个答案: