如何仅针对 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>

我有一个方法可以将 "expense" 添加到数组中：

（我记录了我要专门定位的项目）

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

如何仅针对 v-for 数组中的最后一项？

How to target only the last item in a v-for array?

arrays

vue.js

vue-component

vuejs2

v-for