Question

背景-我创建了一个应用，在该应用中，父组件可以单击按钮来创建和删除输入字段（子组件）。输入的值通过v-model记录在屏幕上

问题-创建新输入时，以前的值将替换为新输入值。

期望-：创建新输入时，它将添加前一个输入值的值

视觉效果更清晰

https://i.stack.imgur.com/Fp8Mk.png

父组件

 <form-input v-for="n in count" :key="n" :value="expense" @input="expense = $event"></form-input>

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

      <p>Total Expense: {{ expense }}</p>

export default {
  components: {
    "form-input": formInput
  },
  name: "form",
  data() {
    return {
      count: 0,
      expense: 0
    };
  },
  methods: {
    addInputs: function() {
      this.count++;
    },
    deleteInputs: function() {
      this.count--;
    }
  }
};

子组件

<input type="text" placeholder="Expense" />
<input type="number" placeholder="Amount" @input="$emit('input', $event.target.value)" />

Answer 1

在这里，我做了一个沙箱供您查看我的解决方案，因为这里有很多更改，您可以看到它的性能。

https://codesandbox.io/s/confident-fire-kpwpp

要点是：

您必须分别跟踪每个输入的值。这是使用数组完成的。
更改此数组后，我们将重新计算总费用

父母

TextFieldParser datReader = new TextFieldParser(Application.StartupPath + @"write here your file address");
        datReader.SetDelimiters(new string[] { " " });
        datReader.HasFieldsEnclosedInQuotes = true;
        string colFields = datReader.ReadToEnd();
        List<string> lineOrder = new List<string>();

        using (StringReader sr = new StringReader(colFields))
        {
            string line;
            while ((line = sr.ReadLine()) != null)
            {
                lineOrder.Add(line);
            }
        }

孩子

<template>
  <div>
    <form-input v-for="(n, idx) in count" :key="n" :id="idx" @input="getExpense"></form-input>

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

    <p>Total Expense: {{ totalExpense }}</p>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";

export default {
  components: {
    "form-input": HelloWorld
  },
  name: "form",
  data() {
    return {
      count: 0,
      expenses: [],
      totalExpense: 0
    };
  },
  methods: {
    addInputs: function() {
      this.count++;

      this.expenses[this.count - 1] = 0;
    },
    deleteInputs: function() {
      this.count--;
      this.expenses.pop();

      this.setTotalExpense();
    },
    getExpense(data) {
      this.expenses[data.id] = parseInt(data.value, 10) || 0;
      this.setTotalExpense();
    },
    setTotalExpense() {
      console.log(this.expenses);

      this.totalExpense = this.expenses.reduce((sum, val) => {
        return sum + val;
      }, 0);
    }
  }
};
</script>

我使用了<template> <div class="hello"> <input type="text" placeholder="Expense"> <input type="number" placeholder="Amount" @input="$emit('input', { value: $event.target.value, id })" > </div> </template> <script> export default { name: "HelloWorld", props: { id: Number } }; </script>模板，所以这就是为什么要引用它的原因，但是我敢肯定，您可以轻松清理它：）

而且，您可能需要清理一些小巧的bug。不过，这应该可以指引您正确的方向。

如何计算动态创建的输入值的总和？

1 个答案:

父母

孩子