javascript - 根据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. Fiddle 应该尽可能短。所以我删除了一些未使用的变量:)
如果 v-for - 不好，则节点上的
2. id。已删除
3. manageTiming 是不必要的 - 您可以直接从模板更改数据。没关系，但是我重构了这个地方
4. 如果可以在天内存储finds，这里是一个有效的示例:

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>