Как показать div onclick с кнопкой внутри v-for l oop in vue? - PullRequest
Новая
       5

Как показать div onclick с кнопкой внутри v-for l oop in vue?

0 голосов
/ 26 мая 2020

Фон

У меня есть v-for l oop, который содержит пару кнопок и входов. Кнопки содержат событие @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;
    }
}

1 Ответ

1 голос
/ 26 мая 2020

Думаю, лучше следить за выбранным id. вы можете отредактировать свои данные, чтобы получить выбранный идентификатор, например: 

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

вместо этого ваш ввод шоу получает индекс: 

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