Vue.js v-for with integer range

by StephenM

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
    <counter-component value="10" />
</div>

CSS

div#demo svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}

JavaScript

let CounterComponent = Vue.extend({
		template: `
    		<div>
          <h3>
            The counter is {{value}}
          </h3>
          <svg v-for="n in 10" :key="n"
               xmlns="http://www.w3.org/2000/svg" version="1.1"
               xmlns:xlink="http://www.w3.org/1999/xlink"
               viewBox="0 0 10 10">
              <circle cx="5" cy="5" r="5"></circle>
          </svg>
        </div>
    `,
    props: {
        value: Number
    }
})

let demo = new Vue({
    el: '#demo',
    components: {
    	CounterComponent
    }
})