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来运行该函数。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用items初始化您的[{ value: '' }]：

＆＃13;

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

＆＃13;

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

＆＃13;

Vue：将值添加到上一个输入时添加新的动态表单输入

2 个答案: