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

Posted 2023-02-16

【中文标题】如何仅定位 v-for 数组中的最后一项？

【英文标题】：How to target only the last item in a v-for array?

【发布时间】：2020-10-04 11:37:35

【问题描述】：

我在 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。

【参考方案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 />

【讨论】：

这么快的反应！我用了你的第一个选项，它奏效了。非常感谢。

我怎么错过了插槽？嘘

有时候你很幸运，得到你答案的人在那一刻正在浏览问题：D

我可以再问你一个问题吗？

当然要问，我想你可以在评论里问！