Vue 2.0 Hello World

by John Passmore

HTML

// This is the problem code that apparently loops forever
<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

var externalConditionalSet;

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]
  },
  beforeMount: function () {
    // We take a reference to the 'reactive' version of the array
  	externalConditionalSet = this.conditionalSet;
  },
  methods: {
    doShow(index){
     // this.conditionalSet; <-- Uncommenting this causes an infinite loop because we got then changed something
     if(this.someInnerConditionThatsNotRenderedOut()){
       if( index === 1 || index === 4 || index === 5 || index === 6){
         externalConditionalSet.pop();
         return true;
       }
     }
     console.log('I should no show index 5 and index 6')
    },
    someInnerConditionThatsNotRenderedOut(){
     return true //comment this out. No error.
     return this.conditionalSet.length > 0
    }
  }
})