时间戳

首页 > 解决方案 > 如何在多次单击时添加输入字段

javascript - 如何在多次单击时添加输入字段

问题描述

我正在尝试创建一个按钮，每次单击它时都会创建一个输入字段。目前，当我单击它时，它只创建一个输入字段，我怎样才能使每次单击它时都会得到一个输入字段？

这是我的html：

<div id="new-input-container"> </div>
 <p class="add-new-shareholders-p"><i class="fa fa-plus-circle fa-lg" @click="createNewInputFields"/>

和我的功能：

createNewInputFields() {
      var container = document.getElementById('new-input-container')
      container.innerHTML = "<input type='text'/>";
    }

标签： javascriptvue.js

解决方案

根据您的逻辑，您可以尝试以下解决方案之一：

第一个逻辑：按数字创建输入

<template>
  <div id="app">
    <input type="text" v-for="i in numberOfInputs" :key="i" />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    numberOfInputs: 0,
  }),
  methods: {
    addInput: function () {
      this.numberOfInputs++;
    },
  },
};
</script>

第二个逻辑：按值创建输入

<template>
  <div id="app">
    <input
      type="text"
      v-for="(value, i) in values"
      :key="i"
      v-model="values[i]"
    />
    <br />
    <button @click="addInput">Add input</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    values: [],
  }),
  methods: {
    addInput: function () {
      let value = "";
      this.values.push(value);
    },
  },
};
</script>

推荐阅读