如何在 vue 的 v-for 循环中显示带有按钮的 div onclick？

Question

背景

我有一个包含一对按钮和输入的 v-for 循环。 这些按钮包含一个 @click 事件，该事件应该显示相应的输入。

问题

单击按钮时，它会显示所有输入实例，而不是单击按钮的相应输入。

 <div class="buttonFor my-3" v-for="(expense,index) in expenseButton" :key="index">
            <input type="submit" @click="showInput(expense)" :value="expense.expensesKey" />
            <input v-show="needEdit" v-model.number="expense.subExpense" type="number" />
          </div>

data() {
    return {
      expenseButton: [],
      needEdit: false
    };
  }

methods: {

    showInput() {
      this.needEdit = !this.needEdit;
    }
}

Answer 1

我认为最好跟踪所选的 ID。 您可以编辑您的数据以接收选择的 ID，例如：

data() {
    return {
      expenseButton: [],
      chosenExpenseId: null
    };
}

您的 show 输入改为接收索引：

methods: {
    showInput(index) {
      this.chosenExpenseId = index;
      // if want to make the button to hide input once clicked back
      // this.chosenExpenseId = this.chosenExpenseId !== index ? index : null;
    }
}

在您的模板中，您传递索引并验证输入显示条件为：

<input type="submit" @click="showInput(index)" :value="expense.expensesKey" />
<input v-show="index === chosenExpenseId" v-model.number="expense.subExpense" type="number" />