Vue：当一个值添加到之前的输入时，添加一个新的动态表单输入

Question

所以每当用户向前一个输入添加一个值时，我都需要创建一个表单输入。我发现了一些关于如何创建动态表单以及如何观察表单输入以调用函数的好问题，但我不知道如何将两者结合起来并使它们协同工作。

new Vue({
  el: '#form',
  data: {
    items: [],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value">
  <button @click="addItem">add</button> {{items}}
</div>

所以目前我可以通过添加一个按钮来添加新输入来完成这项工作，但输入直到你点击按钮后才会显示。我尝试过，v-for="item in items + 1"但这会导致意想不到的疯狂结果，在我考虑之后，我意识到为什么这行不通。我真的很想在加载时有一个输入框，如果用户向该框添加任何值，则会创建一个新的输入框。

Answer 1

好的，我实际上只是自己想出来的 :p 我需要在 mount 上运行该函数，然后使用 v-on:change.once 来运行该函数。

现在我只需要弄清楚如何在输入框为空时删除它。

new Vue({
  el: '#form',
  data: {
    items: [],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  },
  mounted() {
    this.addItem()
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value" @change.once="addItem()">
</div>

Answer 2

初始化你的items作品[{ value: '' }]：

new Vue({
  el: '#form',
  data: {
    items: [{
        value: ''
    }],
  },
  methods: {
    addItem() {
      this.items.push({
        value: ''
      });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="form">
  <input v-for="item in items" v-model="item.value">
  <button @click="addItem">add</button> {{items}}
</div>