lundi 25 mai 2020

How to show a div onclick with a button inside a v-for loop in vue?

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

Aucun commentaire:

Enregistrer un commentaire