Динамическое добавление элементов формы в соответствии с родительским элементом в vue js

Question

Я новичок в разработке vue js.У меня есть одна форма, которая включает в себя список дней.Если я выберу понедельник, он покажет текстовое поле, чтобы добавить временной интервал для понедельника, и есть одна кнопка «Добавить больше», чтобы добавить больше временных интервалов в день.Я пытаюсь добавить временные интервалы по дням, но в настоящее время, что происходит, если я добавляю временной интервал, то он показывает все дни.
Js fiddle - https://jsfiddle.net/1rgc6x04/3/
Вот что я сделал до сих пор -

 <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>

Как добавить временные интервалы в день?
Любая помощь будет оценена.
Спасибо

Answer 1

1. Скрипка должна быть как можно короче.Поэтому я удалил некоторые неиспользуемые переменные:)
2. id s на узлах, если v-for - плохо.Удалено
3. manageTiming не нужно - вы можете изменять данные прямо из шаблона.Это нормально, но я рефакторинг этого места
4. Если можно сохранить finds в days вот рабочий пример:

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>