在堆栈溢出中看到对另一个问题的引用.
我检查了这样的解决方案,但还没有成功.
<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;"> <p>FROM</p> <label for="need" style=" width: 20%!important;">{{value.name}}</label> <input id="value.from" type="time" v-model="value.from" name="value.from" style="width: 30%!important;"> <p>TO</p> <input id="value.to" type="time" v-model="value.to" name="value.to" style="width: 30%!important;"> <br> </div> </div>
我的vue js代码是相同的
work = new Vue({
el: "#work",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: {
wrkSubmit: 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['wrk_list'] = this.string;
$.ajax({
url: 'http://127.0.0.1:8000/add/workhour/',data: data,type: "POST",dataType: 'json',success: function(e) {
if(e.status){
alert("Success")
} else {
alert(" Failed")
}
}
});
return false;
},}
如果我尝试这个代码.我需要为我选择的每一天单独选择工作时间.相反,我需要先选择一个时间,然后在我选择的所有日子里使用那个工作时间.此外,如果用户需要更改时间,请提供编辑选项.这个问题已经解决了,但它不是基于上面给出的代码.
有可能有这样的解决方案吗？首先选择一个工作小时,然后在选择的所有日子里使用它.复选框,并根据需要更改值.
只是为了实验目的.如果有可能请帮助我.
解决方法
上面的答案几乎涵盖了问题,问题是,如果你改变你的默认小时,除非你取消选中它并再次检查,所以选定的天数不会更新,但这里有
Watchers救援,看默认时间(doh)值更改,然后更新选定的天数.
(如果看不到,请在整页中打开代码段)
new Vue({
el: '#app',data: function() {
return {
day:[
{name:"Sunday",],defaultFrom: '',defaultTo: '',}
},methods: {
selectDay: function (item) {
item.from = this.defaultFrom;
item.to = this.defaultTo;
},updateSelecteds: function(from,to) {
for(var i = 0; i < this.day.length; i++) {
var day = this.day[i];
if(day.selected) {
if(from)
day.from = from;
if(to)
day.to = to;
}
}
}
},watch: {
defaultFrom: function(newVal,oldVald) {
this.updateSelecteds(newVal,null)
},defaultTo: function(newVal,oldVald) {
this.updateSelecteds(null,newVal)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<div>
<h3>Working Hours (Default)</h3>
<p>From: <input type="time" v-model="defaultFrom"/></p>
<p>To: <input type="time" v-model="defaultTo"/></p>
</div>
<div>
<h3>Days</h3>
<div v-for="d in day">
<input type="checkBox" value="d.val" v-model="d.selected" @click="selectDay(d)">
<label for="need" style=" width: 20%!important;">{{d.name}}</label>
<span v-if="d.selected">
<span>From</span>
<input type="time" v-model="d.from" name="d.from">
<span>To</span>
<input type="time" v-model="d.to" name="d.to">
</span>
</div>
</div>
</div>
