使用 Vue JS 复制输入字段，增加索引

Question

我需要在用户单击按钮时复制文本输入字段 "add another" 并增加新字段的索引。它类似于但该解决方案没有增加任何内容。

我复制了字段并增加了索引，但它影响了所有索引，而不仅仅是最新的。（感谢 Roy J 的提示）

这是我的模板：

<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>

这是我的 Vue JS 中的内容：

new Vue({
  el: '#app',

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

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

Answer 1

如果我用 this 限定 count++，它对我有用。我将其预增量以避免使第一个元素重复。

我已将占位符文本更改为引用 slot.count（当前 count，而不是父 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>

使用 Vue JS 复制输入字段，增加索引

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

javascript

clone

vue.js