Vue v-for click не показывать корректный элемент - PullRequest
Новая
       22

Vue v-for click не показывать корректный элемент

0 голосов
/ 19 июня 2019

для отображения данных из базы данных: 

<div v-for="item in resourceList" :key="item.id">
    <input :id="roomData.id" type="checkbox" @click="saveCheckbox">
    <label :for="roomData.id">{{ item.question }}</label>

        //calendar
        <span v-if="active">
            <datepicker v-model="date"></datepicker>
        </span>
        <span v-else id="disableCalendar">Not show calendar</span>
</div>

У меня проблема с щелчком по функции.Например на странице v-for показать 10 элементов.В каждом элементе будет кнопка для нажатия @click="saveCheckbox".

Функция в методах: 

saveCheckbox(e){            
    if(e.target.checked) {
        this.active = true;
    } else {
        this.active = false;
    }
}

В данных у меня есть: 

active = false;

Теперь, когда пользовательнапример, нажмите кнопку первого элемента, календарь появится в КАЖДОМ элементе.Как я могу показать календарь ТОЛЬКО в элементе, на который нажал пользователь?

Ответы [ 2 ]

2 голосов
/ 19 июня 2019

Переменная active является общей для каждого элемента в вашем resourceList, вам нужно создать активный идентификатор для каждого элемента в вашем списке, один из способов сделать это - иметь свойство active элемента resourceList. Предполагая, что у вас есть активное свойство в каждом элементе resourceList, вы можете сделать следующее. 

<div v-for="item in resourceList" :key="item.id">
    <input :id="roomData.id" type="checkbox" @click="saveCheckbox(item)">
    <label :for="roomData.id">{{ item.question }}</label>

        //calendar
        <span v-if="active">
            <datepicker v-model="date"></datepicker>
        </span>
        <span v-else id="disableCalendar">Not show calendar</span>
</div>

и метод saveCheckbox 

saveCheckbox(item){            
   item.active = !item.active
}
1 голос
/ 19 июня 2019

Вам необходимо сохранить значение для каждого элемента в цикле.С this.active = true у вас есть только одно состояние, которое вы используете для каждого элемента в цикле.

Пример: 

new Vue({
  el: "#app",
  data: {
    isActive: [false, false, false, false]
  },
  methods: {
    toggleActive(index) {
      this.$set(this.isActive, index, !this.isActive[index])
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(active, index) in isActive" :key="index">
    {{ active }} {{ index }}
    <button type="button" @click="toggleActive(index)">Toggle</button>
  </div>
</div>
...