aUsing Vue JS to duplicate an input field, incrementing the index

Question

I need to duplicate a text input field when user clicks a button "add another" and increment the index on the new field. It's similar to this other question but that solution didn't increment anything.

What I have duplicates the field and increments the index, but it affects all the indexes, not just the newest. (thanks Roy J for the tip)

Here's my template:

<div id="app">
  <template v-for="slot in timeslots">
    <div><input type="text" name="performances[@{{ count }}][timestamp]" v-model="slot.timestamp" placeholder="index @{{ count }}"></div>
  </template>
  <span class="add green btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
  <pre>@{{ timeslots | json }}</pre>
</div>

Here's what I have in my Vue JS:

new Vue({
  el: '#app',

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

  methods: {
    addAnother: function(){
      this.timeslots.push({
        timestamp: '',
        count: this.count++
      });
    }
  }
});

Don't you want this.count++?

Roy J
– Roy J

2016-09-05 20:52:47 +00:00
Commented Sep 5, 2016 at 20:52 — Roy J
– Roy J, Commented Sep 5, 2016 at 20:52
You mean in the method addAnother? Doesn't validate.

Daniel Fowler
– Daniel Fowler

2016-09-05 20:54:35 +00:00
Commented Sep 5, 2016 at 20:54 — Daniel Fowler
– Daniel Fowler, Commented Sep 5, 2016 at 20:54

Roy J · Accepted Answer · 2016-09-06 14:07:57Z

3

It works for me if I just qualify count++ with this. I made it pre-increment to avoid making the first elements duplicates.

I've changed the placeholder text to refer to slot.count (the current count, rather than the parent count).

new Vue({
  el: '#app',

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

  methods: {
    addAnother: function() {
      this.timeslots.push({
        timestamp: '',
        count: ++this.count
      });
    }
  }
});

.green.btn {
  background-color: green;
  color: white;
  padding: 5px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="app">
  <template v-for="slot in timeslots">
    <div>
      <input type="text" name="performances[@{{ slot.count }}][timestamp]" v-model="slot.timestamp" placeholder="index {{ slot.count }}">
    </div>
  </template>
  <span class="add green btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
  <pre>@{{ timeslots | json }}</pre>
</div>

edited Sep 6, 2016 at 14:07

answered Sep 5, 2016 at 23:29

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Fowler Over a year ago

That's close. I guess I wasn't clear enough; I'm trying to increment only the newest field, so that each field's index is sequential.

Roy J Over a year ago

@danfo Each field's count is sequential. There is also a count in the parent, which you were using in the placeholder. I've updated that.

Brandon Franklin Over a year ago

@RoyJ I see you are using

<input type="text" name="performances[@{{ slot.count }}][timestamp]" v-model="slot.timestamp" placeholder="index {{ slot.count }}">

, however I am inside an MVC app using Razer views so I cannot use the @ symbol. I tried some combinations of v-on: with no success, any ideas for the alternate syntax?

Roy J Over a year ago

I don't think there's anything special about the @. You ought to be able to use anything -- it's just constructing a name attribute. Also note that this is Vue 1. Interpolation inside attributes isn't supported in Vue 2.

Collectives™ on Stack Overflow

aUsing Vue JS to duplicate an input field, incrementing the index

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related