[Vuejs]-VueJs – Duplicating form vs. input field

by

0👍

You need to access the form data with workouts[index].unit for the v-model instead of workout.workout_unit

var app = new Vue({
  el: '.container', 
  data: {
    workouts: [ 
      {
        unit: '', 
        weight: '',
        comment: ''
      }
    ]
  },

  methods: {
    addRow () {
      this.workouts.push({
        unit: '', 
        weight: '',
        comment: ''
      })
    },
    deleteRow (index) {
      this.workouts.splice(index, 1)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>

<div class="container">
  <button class="btn btn-primary" type="button" name="button" @click="addRow">Add form fields</button>
  
  <div class="card" v-for="(workout, index) in workouts">
    <div class="card-body">
      <i class="far fa-trash-alt float-right" @click="deleteRow(index)"></i>
      <h4 class="card-title">Test form - {{index}}</h4>
      <div class="employee-form">
        <select class="form-select form-select-sm" aria-label=".form-select-sm example">
          <option selected>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        <div class="registration_grid">
          <input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
          <input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
          <input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
        </div>
      </div>
    </div>
  </div>
</div>

Modified example to only duplicate the input fields

var app = new Vue({
  el: '.container', 
  data: {
    workouts: [ 
      {
        unit: '', 
        weight: '',
        comment: ''
      }
    ]
  },

  methods: {
    addRow () {
      this.workouts.push({
        unit: '', 
        weight: '',
        comment: ''
      })
    },
    deleteRow (index) {
      this.workouts.splice(index, 1)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>

<div class="container">
  <button class="btn btn-primary" type="button" name="button" @click="addRow">Add form fields</button>
  
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Test form</h4>
      <div class="employee-form">
        <select class="form-select form-select-sm" aria-label=".form-select-sm example">
          <option selected>Open this select menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        <div class="registration_grid" v-for="(workout, index) in workouts">
          <input type="text" class="form-control" name="unit" placeholder="unit" v-model="workouts[index].unit">
          <input type="text" class="form-control" name="weight" placeholder="weight" v-model="workouts[index].weight">
          <input type="text" class="form-control" name="comment" placeholder="comment" v-model="workouts[index].comment">
          <i class="far fa-trash-alt float-right" @click="deleteRow(index)"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Leave a comment