如何在点击时动态添加到 DOM？答案

【问题标题】：How to add dynamically add to DOM on click?如何在点击时动态添加到 DOM？
【发布时间】：2019-06-27 20:37:30
【问题描述】：

我有一个有输入的表单。用户可以单击添加按钮，然后在其下方会出现另一个输入，依此类推。我遇到的问题是如何在点击事件中向 DOM 添加输入。

我的第一个想法是使用 ngFor 或 v-for（我都在使用，答案可以在其中任何一个中）。当我单击添加按钮时，它会增加一个计数器，然后将计数器推入一个数组。然后使用 for 它将显示输入。

let inputs = 0;
addInput() {
  this.inputs++;
  this.criteria.push(this.inputs);
}

<button @click.prevent='addInput'>Add input</button>

<input type='text' value='Default Input'>
<div v-for="input in inputs" v-bind:key="input">
   <input type='text'>
</div>

它按照最初的想法工作。单击按钮时会出现一个新的输入。

当我添加第二个输入，输入一个值，然后添加第三个输入时，会出现问题。第二个输入的值被重置为空白。

如何实现此功能，在点击时添加输入，但在之前的输入中保存值？

谢谢。

【问题讨论】：

标签： javascript typescript vue.js

【解决方案1】：

如果您将输入的值（使用 v-model）绑定到您的 inputs 数组中的值，它应该保留您的值 - 即使在添加新输入时也是如此。

let inputs = [];
addInput() {
  this.inputs.push({value: ""});
}

<button @click.prevent='addInput'>Add input</button>

<input type='text' value='Default Input'>
<div v-for="(input, index) in inputs" v-bind:key="index">
   <input v-model="input.value" type='text'>
</div>

【讨论】：