[Vuejs]-Vue.js Conditional and V-For not working as intended

by

6👍

This looks like an assigment not comparition:

checkCount = 1

try this instead:

checkCount == 1 or checkCount === 1

👤Rob

1👍

Observations :

  • You are using assignment operator =, It should be comparison operator == or ===.
  • There is no property named as id in the item. I think it should be item.text instead of item.id as per your photos object.

Explanantion :

As per your current code, checkCount computed property will get the value based on the photos array length which is 8. Hence, as per the second condition, computed property will return 2.

But as you are splicing the photos array photos.splice(0, 4) inside the div. It will remove the 5 objects (from index 0 to index 4) from a photos array. Hence, In that case remaining objects will be only 3 and photos array length become 3 which trigger the computed property and will return 1. That’s the reason at the end you will be only see the first condition div content.

Live Demo :

new Vue({
  el: '#app',
  data: {
    photos: [
      {
        img: "https://picsum.photos/300/300",
        text: 1,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 2,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 3,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 4,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 5,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 6,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 7,
      },
      {
        img: "https://picsum.photos/300/300",
        text: 8,
      },
    ]
  },
  computed: {
    checkCount() {
      if (this.photos.length <= 4) {
        return 1;
      } else if (this.photos.length > 5 && this.photos.length <= 8) {
        return 2;
      } else if (this.photos.length > 9 && this.photos.length <= 12) {
        return 3;
      } else {
        return 4;
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="checkCount === 1">
    First Div
  </div>
  <div v-if="checkCount === 2">
    Second Div
    <div v-for="item in photos.splice(0, 4)" :key="item.text">
      <p>{{ item.text }}</p>
    </div>
  </div>
</div>
👤Debug Diva

Leave a comment