CODEWITHSUNDEEP
javascriptvue.jsfor-loopif-statementvuejs2
Eddie Weldon
Eddie Weldon

Reputation: 133

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

Upvotes: 0

Views: 1276

Answers (1)

buzatto
buzatto

Reputation: 10382

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

Upvotes: 2

Related Questions