JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(image, index) in imagesToShow">
    
    <template v-if="image.show")>
     <p>conditionally shown index {{index}}</p>
     <p>conditionally shown image object {{image}}</p>
    </template>
  </div>
  
  <p>{{ message }}</p>
</div>

JavaScript

// This is increased console.logged version of the problem code

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! I do not like loops, all that much.',
    imageSet: [
     'a','b','c','d','e','f','g', 'h', 'i', 'j'
    ],
    conditionalSet: [1,2] //image/indexes to be shown as indexes and successively popped off from end
  },  // end of data
  computed: {
  	imagesToShow() {
    	return this.imageSet.map((image, index) =>  {
      	console.log('Considering image', { image: image, index: index, conditionalSetLength: this.conditionalSet.length });
      	let imageWithVisibility = {  // an object with image and showFlag
        	image: image,
          show: false
        };        
        if(this.someInnerConditionThatsNotRenderedOut()) {
        	console.log('If index 1,4,5 or 6, pop conditionalSet - initially [1,2] - ', {index: index, thisconditionalSet: JSON.stringify(this.conditionalSet, null, 4)})
          if( index === 1 || index === 4 || index === 5 || index === 6){
            this.conditionalSet.pop();
            imageWithVisibility.show = true; // toggle the images showFlag
          }
        }
        return imageWithVisibility; // the object with an image and a showFlag
      });
    }
  },
  methods: {
    someInnerConditionThatsNotRenderedOut(){
    //  return true //comment this out. No error.
     if (this.conditionalSet.length > 0) {  // this statement is unreacheable after return true
     // if true commented out, this.conditionalSet.length > 0 is initially true until 	 	//	after 2 pops
    console.log('ConditionalSet.length now: ' + this.conditionalSet.length )
    return true
    
     }
    }
  }
  
  /*
  beforeMount: function () {
    // We take a reference to the 'reactive' version of the array
  	externalConditionalImagesIndexArray = this.conditionalImagesIndexArray;
  }, // end of beforeMount
  */
  /*
  methods: {
  	doShow(index){
    
     // this.conditionalImagesIndexArray;  Uncommenting this causes an infinite...