Question

我是vue js开发的新手。我有一种表格，其中包括天数清单。如果我选择星期一，它将显示文本字段以为星期一添加时隙，并且有一个按钮“添加更多”以逐日添加更多时隙。我正在尝试逐日添加时间段，但目前，如果我添加时间段然后整天显示该情况，该怎么办？
小提琴手-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

提琴应尽可能短。所以我删除了一些未使用的vars：）

id

v-for个。已删除
manageTiming是不必要的-您可以直接从模板中更改数据。可以，但是我将这个地方重构了
如果可以将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>

根据Vue JS中的父元素动态添加表单元素

1 个答案: