Question

我有一个有输入的表格。用户可以单击添加按钮，另一个输入将出现在其下，依此类推。我遇到的问题是如何在点击事件中向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>

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

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

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

谢谢。

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

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

1 个答案: