Добавление блока при нажатии на кнопку

117

24 января 2020, 22:50

Как сделать, чтобы при нажатии на кнопку появлялся еще один такой блок.

methods: { 
  AddAudit() { 
    this.bsaInfo.worker_info.push(' '); 
  } 
}

<div> 
  <span>Нарушитель</span> 
  <!-- Имя нарушителя --> 
  <input list="workerFullname" type="text" placeholder="Фамилия Имя Отчество / табельный номер"> 
  <datalist id="workerFullname"> 
                <option> 
                      ... 
                </option>                       
              </datalist> 
  <!-- Должность нарушителя --> 
  <input list="workerPosition" type="text" placeholder="должность"> 
  <datalist id="workerPosition"> 
                <option > 
                      ... 
                </option> 
              </datalist> 
  <span class="add">Добавить <button v-on:click="AddAudit" class="btn">+</button></span> 
</div>

Answer 1

Один из вариантов...

var addAudit = function() { 
	var elemKod = document.querySelector('.in-kod').innerHTML; 
	var elemOutKod = document.querySelector('.out-kod'); 
 
	elemOutKod.innerHTML += '<div>' + elemKod + '</div>'; 
}; 
 
document.onclick = function() { 
	var elem = window.event.srcElement; 
	if (elem.className === "btn") { 
		addAudit(); 
	} 
};

<span class="in-kod"> 
  <span>Нарушитель</span> 
  <!-- Имя нарушителя --> 
  <input list="workerFullname" type="text" placeholder="Фамилия Имя Отчество / табельный номер"> 
  <datalist id="workerFullname"> 
                <option> 
                      ... 
                </option>                       
              </datalist> 
  <!-- Должность нарушителя --> 
  <input list="workerPosition" type="text" placeholder="должность"> 
  <datalist id="workerPosition"> 
                <option > 
                      ... 
                </option> 
              </datalist> 
</span> 
<span class="add">Добавить<button class="btn">+</button></span> 
<div class='out-kod'> 
</div>

Answer 2

new Vue({ 
  el: '#app', 
  data: { 
    arr: [], 
    name: '', 
    rank: '' 
  }, 
  methods: { 
    add() { 
        this.arr.push({ 
          name: this.name, 
          rank: this.rank 
        }) 
    } 
  } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
<span class="in-kod"> 
  <span>Нарушитель</span> 
  <!-- Имя нарушителя --> 
  <input list="workerFullname" type="text" v-model="name" placeholder="Фамилия Имя Отчество / табельный номер"> 
  <datalist id="workerFullname"> 
                <option> 
                      ... 
                </option>                       
              </datalist> 
  <!-- Должность нарушителя --> 
  <input list="workerPosition" v-model="rank" type="text" placeholder="должность"> 
  <datalist id="workerPosition"> 
                <option > 
                      ... 
                </option> 
              </datalist> 
</span> 
<span class="add">Добавить<button @click="add()" class="btn">+</button></span> 
<div class='out-kod'> 
  <h1>Список:</h1> 
  <div v-for="( item, index ) in arr" :key="index"> 
  Имя: {{ item.name }}, Должность: {{ item.rank }}, ID: {{ index }} 
  </div> 
</div> 
 
</div>