0

Есть форма 2 кнопки

<div>
    <input type="text">     
</div>


<button>Добавить</button>
<button>Взять все</button>

Как сделать что бы при клике на первую кнопку дублировалась вся форма (то есть div с input), дублировался ниже , а потом при клике на вторую кнопку я получил массив значений со всех input , c использование vue

1 ответ 1

2

Здесь пример клонирования, как брать значения, вроде тоже понятно.

<div id="app">

   <ul class="list-group seats">
    <li class="list-group-item seat" v-for="seat in seats">
      <div class="row">
        <div class="col-xs-6">
          <p>Seat No.{{ seat.number }}</p>
        </div>
        <div class="col-xs-6 text-right">
          <div class="form-inline">
            <input type="text" class="form-control input-sm" v-model="seat.number">
            <button @click="cloneSeat(seat)" class="btn btn-sm btn-default">Clone</button>
            <button @click="removeSeat(seat)" class="btn btn-sm btn-danger">Remove</button>
          </div>
        </div>
      </div>
    </li>
  </ul>

  <pre>{{ $data | json }}</pre>

</div>

new Vue({

    el: '#app',

    data: function() {
    return {
        seats: [{ number: '1' }]
    }
  },

    methods: {

        cloneSeat: function(seat) {      
        this.seats.push({ number: seat.number });
      },

      removeSeat: function(seat) {
        this.seats.$remove(seat);
      }

  }


})

https://jsfiddle.net/joedawson/wrxdheum/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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