我怎样才能选择一次这个时间,并将这段时间用在vue js html的所有日子里?

时间:2018-02-16 15:53:04

标签: javascript vue.js vue-component vue-router

目前我正在使用以下代码

 <form method="POST" id="form3" onSubmit="return false;" data-parsley-validate="true" v-on:submit="invSubmit($event);">                                
                                        <h4 class="info-text">Give your Inventory and Work Hours ? </h4>
                                        <div class="row">  
                                            <div class="col-sm-6"> 
                                                 <div class="form-group">
                                                    <label>Working Hours :</label>
                                                     <div v-for="value in day" class="checkboxFour">
                                                    <input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
                                                      <label for="need" style=" width: 30%!important;">{{value.name}}</label>
  <select v-model="value.from" class="select-style" v-bind:class="{required: isRequired}" required="">From
      <option value="08:00">08.00</option>
      <option value="09:00">09.00</option>
      <option value="10:00">10.00</option>
      <option value="11:00">11.00</option>
      <option value="12:00">12.00</option>
      <option value="13:00">13.00</option>
      <option value="14:00">14.00</option>
      <option value="15:00">15.00</option>
      <option value="16:00">16.00</option>
      <option value="17:00">17.00</option>
      <option value="18:00">18.00</option>
      <option value="19:00">19.00</option>
      <option value="20:00">20.00</option>
      <option value="21:00">21.00</option>
      <option value="22:00">22.00</option>
      <option value="23:00">23.00</option>
      <option value="00:00">00.00</option>
      <option value="01:00">01.00</option>
      <option value="02:00">02.00</option>
      <option value="03:00">03.00</option>
      <option value="04:00">04.00</option>
      <option value="05:00">05.00</option>
      <option value="06:00">06.00</option>
      <option value="07:00">07.00</option>
    </select>
    <select v-model="value.to" class="select-style" required="">To
      <option value="17:00">17.00</option>
      <option value="18:00">18.00</option>
      <option value="19:00">19.00</option>
      <option value="20:00">20.00</option>
      <option value="21:00">21.00</option>
      <option value="22:00">22.00</option>
      <option value="23:00">23.00</option>
      <option value="00:00">00.00</option>
      <option value="01:00">01.00</option>
      <option value="02:00">02.00</option>
      <option value="03:00">03.00</option>
      <option value="04:00">04.00</option>
      <option value="05:00">05.00</option>
      <option value="06:00">06.00</option>
      <option value="07:00">07.00</option>
      <option value="08:00">08.00</option>
      <option value="09:00">09.00</option>
      <option value="10:00">10.00</option>
      <option value="11:00">11.00</option>
      <option value="12:00">12.00</option>
      <option value="13:00">13.00</option>
      <option value="14:00">14.00</option>
      <option value="15:00">15.00</option>
      <option value="16:00">16.00</option>
    </select>
    <br>

  </div>
      </div> 
   </div>
              <div class="wizard-footer">
                       <div class="pull-right">
                               <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
                                     </div>
                                 </div>
         </div></form> 

当我这样做时,我需要为我正在使用的每个复选框选择工作时间。这很费时间。我需要先选择一个工作小时,然后自动为我选择的复选框选择工作时间。如果我需要更改复选框的特定时间,我也需要这样做。我怎样才能达到同样目的。

我的vue js代码是

submitBox = new Vue({
el: "#submitBox",
  data: {
   data: [],
    day:[
    {name:"Sunday",val:1},
    {name:"Monday",val:2},
    {name:"Tuesday",val:3},
    {name:"Wednesday",val:4},
    {name:"Thursday",val:5},
    {name:"Friday",val:6},
    {name:"Saturday",val:7}
    ],
    string:'',
  },



methods: {
     invSubmit: function(e) {
    var arr = [];
    this.day.map(function(v,i) {
     console.log(v.selected == true,);
     if(v.selected == true) 
      {
      arr.push(v.val+'&'+v.from+'&'+v.to);
      }
    });
    this.string = arr.join(',');
           var vm = this;
           data = {};
           data['inv'] = this.inv.join(',');
           data['wrk_list'] = this.string;
           data['pid'] = this.pid;
             data['auth-token'] = this.authType;
            $.ajax({
              url: 'http://127.0.0.1:8000/alpha/add/post/inv_whr/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {

                $("#alertModal").modal('show');
              $(".alert").removeClass("hidden").html("Your data has been successfully recorded");

            }
              else {
                vm.response = e;

               alert("Registration Failed") 
              }
          }
            });
            return false;
},
   } 

我需要以下列格式传递数据:v.val +'&amp;'+ v.from +'&amp;'+ v.to。我已经完成了上面的代码。

如何先选择工作小时,然后选择日期。如果我需要改变特定日子的工作时间,我也需要这样做。

请帮我解决一下。我在js中很弱。这是我第一次做项目。请帮我解决一下。

0 个答案:

没有答案