title: Vue `v-for` directive with integer range bound to component property?
body: <p>I am experimenting with <em>Vue.js</em> (version 2.5.16) and its <code>v-for</code> directive which should be able to repeat an element according to some integer range, according to the <a href="https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range" rel="nofollow noreferrer">official Vue.js documentation</a>. Concretely, I am trying to write a component that draws a number of circular counters based on an integer-valued property.</p>
  <p>The following snippet, containing the hard-coded literal value <code>10</code>, does indeed render precisely ten circles: (<a href="https://jsfiddle.net/StephenM/vvj23rae/17/" rel="nofollow noreferrer">jsfiddle</a>)</p>
  <pre><code>    &lt;svg class=&quot;counter&quot; v-for=&quot;n in 10&quot; :key=&quot;n&quot;
           xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;
           xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
           viewBox=&quot;0 0 10 10&quot;&gt;
          &lt;circle cx=&quot;5&quot; cy=&quot;5&quot; r=&quot;5&quot;&gt;&lt;/circle&gt;
      &lt;/svg&gt;
  </code></pre>
  <p>However, hard-coding the value is of limited utility. I have added an integer-valued property to my component as follows: (<em>typescript</em>)</p>
  <pre><code>export default Vue.extend({
      props: {
          counter: Number
      },
      ...
  </code></pre>
  <p>... and tried the following variants of the <code>v-for</code> directive:</p>
  <ul>
  <li><code>v-for=&quot;n in counter&quot; :key=&quot;n&quot;</code> (<a href="https://jsfiddle.net/StephenM/vvj23rae/19/" rel="nofollow noreferrer">jsfiddle</a>)</li>
  <li><code>v-for=&quot;n in {counter}&quot; :key=&quot;n&quot;</code> (<a href="https://jsfiddle.net/StephenM/vvj23rae/20/" rel="nofollow noreferrer">jsfiddle</a>)</li>
  </ul>
  <p>But neither of them achieve a variable number of rendered circles. (<em>Note: I have employed the Vue developer tools to ensure that the <code>counter</code> property of the component does, in fact, hold the correct value.</em>)</p>
  <p>This brings me to my question: <strong>How do you use <code>v-for</code> with an integer range set by a property of your component?</strong></p>
  <p>If this is not possible, then the integer-range support of <code>v-for</code> is indeed rather useless. How often does one want to use a hard-coded range?</p>
  <p>However, I still want the behaviour. How would one implement it without <code>v-for</code>? I can think of several possible alternatives:</p>
  <ol>
  <li>Write my own render function.</li>
  <li>Use the <code>counter</code> property in a <em>computed</em> property that returns an array of the desired size and use <code>v-for</code> on that array.</li>
  <li>Bind <code>v-for</code> to an array and hook into changes of the <code>counter</code> property to update that internal array using only array mutations that are listed on the <a href="https://v2.vuejs.org/v2/guide/list.html#Mutation-Methods" rel="nofollow noreferrer">array change detection page</a> so that <em>Vue</em> does not discard and rebuild the entire DOM substructure on every change.</li>
  </ol>
  <p>Option 1 seems like a tonne of work for such a simple use-case. Option 2 is trivially easy but I fear that it will cause <em>Vue</em> to discard and regenerate <em><strong>all</strong></em> the repeated child elements on every change. Option 3 seems like it would perform the best, if it is possible, but I don't really know how to go about it. (As I said, I am investigating <em>Vue</em> for the first time.)</p>
  <p>What to do?</p>