如何仅定位 v-for 数组中的最后一项？

Question

我在 v-for 中有一个对象数组，可以为每个项目创建一个组件，如下所示：

<div v-for="(expense, idx) in myExpenses" :key="idx">
  <expense-panel
     v-model.number="expense.expensesValue"
     :expense="expense"
     :myExpenses="myExpenses"
     :showEdit="showEdit">
   </expense-panel>
</div>

我有一种方法可以在数组中添加额外的“费用”：

（我记录了我要专门针对的项目）

 addExpense() {
      this.myExpenses.push({
        expensesKey: "",
        expensesValue: null,
        subExpense: null,
      });
//The last item in the array
      console.log(this.myExpenses[this.myExpenses.length - 1]);
    },

Vue中有没有办法专门在数组的最后一项添加输入元素？

我已经在父母的 Data() 中有一个 showInput = false。

Answer 1

例如，您可以将slot 添加到expense-panel 并有条件地在那里渲染your-input，前提是它是要渲染的最后一个项目，如下所示：

<div v-for="(expense, idx) in myExpenses" :key="idx">
  <expense-panel
     v-model.number="expense.expensesValue"
     :expense="expense"
     :myExpenses="myExpenses"
     :showEdit="showEdit">
     <your-input v-if="idx === myExpenses.length - 1" />
   </expense-panel>
</div>

其他选择可能是将道具传递给面板（如is-last）并将输入烘焙到expense-panel。

另外，如果输入应该在最后一项之后以视觉方式呈现，您可以简单地在整个列表之后添加输入：

<div v-for="(expense, idx) in myExpenses" :key="idx">
  <expense-panel
     v-model.number="expense.expensesValue"
     :expense="expense"
     :myExpenses="myExpenses"
     :showEdit="showEdit">
   </expense-panel>
</div>
<your-input />