Vue with Iterators

by Mladen Mihajlovic

HTML

<div id="app">
  <h2>Example with vanilla iterator (<code>range(5, 10)</code>)</h2>
  <ul>
    <li v-for="n in range(5, 10)">
      {{ n }}
    </li>
  </ul>
  <h2>Example with generator</h2>
  <h3>Todos:</h3>
  <ol>
    <li v-for="todo in todos">
      {{ todo }}
    </li>
  </ol>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

ol, ul {
  margin-bottom: 20px;
}

li {
  margin: 8px 0;
}

h2, h3 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

function range (start, end) {
	let current = start - 1
  return {
  	next () {
    	if (current < end) {
      	current++
        return { value: current, done: false }
      }
      return { done: true }
    },
    [Symbol.iterator] () {
    	return this
    }
  }
}

function* generator () {
	yield "Learn JavaScript"
  yield "Learn Vue"
  yield "Play around in JSFiddle"
  yield "Build something awesome"
}

new Vue({
  el: "#app",
  computed: {
  	todos () {
    	return generator()
    }
  },
  methods: {
  	range
  }
})