[Vuejs]-Vue v-for click not show correcly element

by

1👍

✅

You need to store the value for each item in the loop. With this.active = true you have only one state which you use for every item in the loop.

Example:

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>
👤Vucko

2👍

The active variable is shared for each item in your resourceList, you need to create active identifier for each item in your list, one way to do it is to have active property of item of resourceList. Assuming you have active property in each item of resourceList, you can do the following.

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

And the saveCheckbox method

saveCheckbox(item){            
   item.active = !item.active
}
👤Ahsan Sohail

Leave a comment