javascript - 如何将for循环中的元素传递给父组件？

Question

背景我有一个子组件循环通过从我的父组件传递的名为“expenseButton”的数组。在这个 for 循环中是正在更新的元素。特别是“费用”。

子组件

<form class="container">
      <div class="buttonList" v-for="(expense, index) in expenseButton" :key="index">
        <button type="button" @click="expenseButtonClick(expense)">{{expense.expensesKey}}</button>

        <input class="textInput" v-model.number="expense.subExpense" type="number" />

      </div>
</form>

<script>
export default {
  props: {
    expenseButton: Array,
  },
  methods: {
    expenseButtonClick(expense) {
      expense.expensesValue = expense.expensesValue - expense.subExpense;
    }
}
}
</script>

问题我知道 $emit 事件可以将数据传递给父级。但是，我试图找出将数组的更新元素发送回父组件的最佳方法。

父组件数据

<template>
<expense-button :expenseButton="expenseButton"></expense-button>

</template>

<script>
export default {
  components: {
    "expense-button": Expenses
  },
  data() {
    return {
      expenseButton: [    
{"expensesKey":"rent","expensesValue":null,"subExpense":""},
{"expensesKey":"movies","expensesValue":null,"subExpense":""},
{"expensesKey":"clothes","expensesValue":null,"subExpense":""}
],
    };
  }
}
</script>

标签： javascriptvue.jsvuejs2componentsv-for

Answer 1

我认为你应该使用 $emit。子组件：

<form class="container">
      <div class="buttonList" v-for="(expense, index) in expenseButton" :key="index">
        <button type="button" @click="expenseButtonClick(expense)">{{expense.expensesKey}}</button>

        <input class="textInput" v-model.number="expense.subExpense" type="number" />

      </div>
</form>

<script>
export default {
  props: {
    expenseButton: Array,
  },
  methods: {
    expenseButtonClick(expense) {
      expense.expensesValue = expense.expensesValue - expense.subExpense;
      this.$emit("expense-btn-clicked", expense)
    }
  }
}
</script>

父组件：

<template>
  <expense-button :expenseButton="expenseButton" @expense-btn-clicked="btnClickedHandler"></expense-button>
</template>

<script>
export default {
  components: {
    "expense-button": Expenses
  },
  data() {
    return {
      expenseButton: [    
        {"expensesKey":"rent","expensesValue":null,"subExpense":""},
        {"expensesKey":"movies","expensesValue":null,"subExpense":""},
        {"expensesKey":"clothes","expensesValue":null,"subExpense":""}
      ],
    }
  },
  methods: {
    btnClickedHandler(e) {
      console.log(e)
    }
  }
}
</script>