Adding form elements dynamically as per parent element in vue js

Question

I am new in vue js development. I have one form which includes days list. If i select monday it will show text field to add time slot for monday and there is one button "Add more" to add more time slots day wise. I am trying to add time slots day-wise but currently what is happening if I add time slot then it shows in all days.
Js fiddle - https://jsfiddle.net/1rgc6x04/3/
Here is what I have done so far -

 <template>
  <div>
     <div class="box-with-radius margin-top-30 clearfix">
      <div class="col-sm-12" v-for="(dayVal,index) in days">
        <div class="checkbox">
          <input :id="'day'+dayVal.id" type="checkbox" @change="manageTiming(dayVal.id,dayVal.day,$event)" :value="dayVal.day" v-model="timeData" />
          <label :for="'day'+dayVal.id" :checked="dayVal.status">{{dayVal.day}}</label>
          <div class="space"></div>
        </div>
        <div class="container" id="app-container" v-show="dayVal.status">
          <div class="row" v-for="find in finds">
            <div class="time-slot">
              <div class="col-sm-9 col-md-4">
                <label for="chkTest">Time</label>
                <input type="text" name="start-time" class="form-control form-input start-time" v-model="find.value">
              </div>
              <div class="col-sm-3 col-md-4">
                <button class="delete-button">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <button class="add-more-time-slot" type="button" @click="btnAddMore">
              ADD MORE TIME SLOT
            </button>
          </div>
        </div> 
      </div>

      <div class="form-group">
        <div class="row">
          <div class="col-sm-4"> 
            <button class="btn btn-save" type="submit">SAVE</button>
          </div>
        </div>
      </div>
    </div>
  </div>
<template>

 <script>
      import Doctorheader from '../../../components/layout/Doctorheader';
      import 'vue-country-region-select'

      export default {
        name: 'Profile',
        components : {
          'doctorheader-component' : Doctorheader
        },
        data () {
          return {
            days : [
            {id : 1,day : 'MONDAY',status : false},
            {id : 2,day : 'TUESDAY',status : false},
            {id : 3,day : 'WEDNESDAY',status : false},
            {id : 4,day : 'THURSDAY',status : false},
            {id : 5,day : 'FRIDAY',status : false},
            {id : 6,day : 'SATURDAY',status : false},
            {id : 7,day : 'SUNDAY',status : false}
            ],
            finds : []
          }
        },
        methods : {
          btnAddMore(){
            this.finds.push({ days: '' });
          }
        }
      }
    </script>

How to add time slots as per day?
Any help would be appreciated.
Thanks

What about creating finds as object. Like finds:{1 : [],2:[],..} and pushing time slots based on id.And also render using id.Or else let me know what is your structure of finds as its not declared in above code. — Riddhi
– Riddhi, Commented Feb 18, 2019 at 6:12
@Riddhi Can I add time slots in days json object instead of adding in finds object? — amM
– amM, Commented Feb 18, 2019 at 6:18
yes you may directly add in there but for that everytime when you add a time slot you will have to loop through the whole json and compare the id for pushing at respective position. — Riddhi
– Riddhi, Commented Feb 18, 2019 at 6:27
Or you may convert your days to object with key as your id attribute.Then it will make things really simple. — Riddhi
– Riddhi, Commented Feb 18, 2019 at 6:27
Or if you can create a fiddle and give me the link then i can make your example work. — Riddhi
– Riddhi, Commented Feb 18, 2019 at 6:28

gleam · Accepted Answer · 2019-02-18 07:36:29Z

1

Fiddle should be as short as possible. So I removed some unused vars :)
ids on nodes if v-for - is bad. Removed
manageTiming is unnecessary - you can mutate data directly from template. It is ok, but I refactored this place
If it is possible to store finds in days here is a working example:

https://jsfiddle.net/cmjt5fpb/1/

      <div class="row" v-for="time, idx in dayVal.times">
        <div class="time-slot">
          <div class="col-sm-9 col-md-4">
            <label for="chkTest">Time</label>
            <input type="text" name="start-time" class="form-control form-input start-time" v-model="dayVal.times[idx]">
          </div>
        </div>
      </div>

answered Feb 18, 2019 at 7:36

gleam

8706 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amM Over a year ago

This is what I wanted. Thanks a lot.

Collectives™ on Stack Overflow

Adding form elements dynamically as per parent element in vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related