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

Question

Background

I have a v-for loop that contains a pair of buttons and inputs. The buttons contains an @click event that is suppose to show the corresponding input.

Problem

When the buttons are clicked it shows all the input instances instead of the corresponding input to the button clicked.

 <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

I think it's better you keep track of the chosen id. you could edit your data to receive chosen id like:

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

your show input receives the index instead:

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

at your template you pass the index and validates input show condition as:

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