目前我正在使用以下代码
<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中很弱。这是我第一次做项目。请帮我解决一下。