Vue 2.0 Hello World - JSFiddle

by John Passmore

HTML

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

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

JavaScript

// This is 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]
  },
  computed: {
  	imagesToShow() {
    	return this.imageSet.map((image, index) =>  {
      	console.log('Considering image', { image: image, index: index, conditionalSetLength: this.conditionalSet.length });
      	let imageWithVisibility = {
        	image: image,
          show: false
        };        
        if(this.someInnerConditionThatsNotRenderedOut()) {
        	console.log('If index 1,4,5 or 6 pop conditionalSet - initially [1,2] - index: ' + index)
          if( index === 1 || index === 4 || index === 5 || index === 6){
            this.conditionalSet.pop();
            imageWithVisibility.show = true;
          }
        }
        return imageWithVisibility;
      });
    }
  },
  methods: {
    someInnerConditionThatsNotRenderedOut(){
     return true //comment this out. No error.
     return this.conditionalSet.length > 0
    }
  }
})