Vue 2.0 Hello World

by John Passmore

HTML

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

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

JavaScript

// This is proposed solution to the problem code
var internalConditionalSet;

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] // the same as this.conditionalSet
  },
  beforeMount: function () {
    // We take a reference to the 'reactive' version of the array
  	internalConditionalSet = this.conditionalSet;
  },
  methods: {
    doShow(index){
      //this.conditionalSet; /* Uncommenting this causes an infinite update loop because we got this.conditionalSe then changed it - solved by copying this.conditionalSet to local internalConditionalSet and changing that - eventually return true or false as result of this.conditionalSet.length > 0, a comapison which is not rendered*/
     if(this.someInnerConditionThatsNotRenderedOut()){  // until conditionalSet.length popped to 0
       if( index === 1 || index === 4 || index === 5 || index === 6){
         internalConditionalSet.pop();
         return true;
       }
     }
     console.log('I should not show index 5 and index 6')
    },
    someInnerConditionThatsNotRenderedOut(){
     return true //comment this out. No error.
     return this.conditionalSet.length > 0  // return it having not accessed it
    }
  }
})