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

【问题标题】：How to pass elements in a for loop to parent component?如何将for循环中的元素传递给父组件？
【发布时间】：2020-06-06 22:49:24
【问题描述】：

背景我有一个子组件循环遍历从我的父组件传递的名为“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 事件可以将数据传递给父级。但是，我试图找出将更新后的 elements 数组发送回父组件的最佳方式。

父组件数据

<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>

【问题讨论】：

标签： javascript vue.js vuejs2 components v-for

【解决方案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>

【讨论】：

我得到了那部分，但是父级如何知道哪个对象会被更新？ $emit 中发送的“expense”属性只是“expenseButton”for 循环的迭代
@EddieWeldon 因为当它进入expenseButtonClick(expense) 时，expense 被发送给父级。 expense 是 expenseButton 数组的一个元素。示例：{"expensesKey":"rent","expensesValue":null,"subExpense":""}
知道了！非常感谢