0

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

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>

2 ответа 2

0

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

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>

0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.