Context
In my code, I am utilizing a v-for loop to display sets of buttons and corresponding input fields. Each button is supposed to trigger the display of its respective input field upon being clicked.
Issue
However, the problem arises when the buttons are clicked, as instead of showing only the relevant input field, all input instances are displayed simultaneously.
<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;
}
}