[Vuejs]-Setting a dynamic initial index for template variable using Vue JS

by

0👍

✅

I solved it myself in shorter time than expected using the 2nd method I speculated about in my OP, and using $index instead of an arbitrary integer like count. This method requires the JS to be put directly in my template though, not in a separate file. But that’s fine by me.

<div id="oven">
  <template v-for="biscuit in oven">
    <div>
      <input type="text" name="performances[@{{ $index }}][showtime]" value="@{{ biscuit.showtime }}">
    </div>
  </template>
  <span class="add small black btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
</div>

<script>
new Vue({
  el: '#oven',

  data: {
    oven: [
      {{ performances }}
      {
        showtime: "{{ showtime }}"
      },
      {{ /performances }}
    ]
  },

  methods: {
    addAnother: function(){
      this.oven.push({
        showtime: '{{ now modify_date="+2 months" format="Y-m-d" }} 7:30 PM'
      });
    }
  }
});
</script>

Leave a comment