Question

当用户单击“添加另一个”按钮并在新字段上增加索引时，我需要复制文本输入字段。它与this other question类似，但该解决方案没有增加任何内容。

我复制了该字段并增加了索引，但它影响了所有索引，而不仅仅是最新的索引。（感谢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

如果我只使用count++限定this，那么它对我有用。我预先增加了它以避免使第一个元素重复。

我已更改占位符文字以引用slot.count（当前count，而不是父count）。

＆＃13;

new Vue({
  el: '#app',

  data: {
    timeslots: [{
      timestamp: '',
      count: 0
    }],
    count: 0
  },

  methods: {
    addAnother: function() {
      this.timeslots.push({
        timestamp: '',
        count: ++this.count
      });
    }
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: