Setting a dynamic initial index for template variable using Vue JS
<p>I'm using a CMS to create a front-end form where customers (theatre directors) can define several showtimes. I have a button they click to "add another" input field as needed (sidenote: I don't know how to enable a 'remove last' button using Vue, but that's another topic for another day).</p>

<p>I've gotten that working. But now, once a director has created their showtimes and they come back to edit them, I need the starting index of the Vue counter to be the number of fields that already exist. So if they've defined 3 showtimes already (0,1,2), the first field dynamically placed with Vue should start with 3.</p>

<p>Alternatively, I wonder if it'd be easier to generate an array of the existing data in Vue when the page loads, but I don't know where I'd start with that method.</p>

<p>Here's my HTML and Vue JS:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',

  data: {
    timeslots: [
      {
        count: 0
      }
    ],
    count: 0
  },

  methods: {
    addAnother: function(){
      this.timeslots.push({
        count: ++this.count
      });
    }
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
  {{ performances }}
    &lt;input name="performances[{{ zero_index }}][showtime]" value="{{ showtime }}"&gt;
  {{ /performances }}

  &lt;template v-for="slot in timeslots"&gt;
    &lt;input name="performances[@{{ slot.count }}][showtime]" value="{{ now }}"&gt;
  &lt;/template&gt;
  
  &lt;div&gt;
    &lt;button @click.prevent="addAnother"&gt;Add another&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Any help to move forward is appreciated!</p>