工作时间选择？

Question

在堆栈溢出中看到对另一个问题的引用.

我检查了这样的解决方案,但还没有成功.

 <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;
    },
  } 

如果我尝试这个代码.我需要为我选择的每一天单独选择工作时间.相反,我需要首先选择一个时间,因此在我选择的所有日子里都要使用工作时间.此外,如果用户需要更改时间,请提供编辑选项.这个问题已经解决了,但它不是基于上面给出的代码.

有可能有这样的解决方案吗？首先选择一个工作小时,然后在选择的所有日子里使用它.复选框,并根据需要更改值.

仅用于实验目的.如果有可能请帮助我.

Answer 1

单击复选框的更改事件时,需要指定数据数组的值,

以下是工作代码,

HTML和JS

var Main = {
	data () {
  	return {
      day: [
          {name:"Sunday",val:1, selected:false, from: '02.15', to: '06.01'},
          {name:"Monday",val:2, selected:false, from: '00.00', to: '00.00'},
          {name:"Tuesday",val:3, selected:false, from: '00.00', to: '00.00'},
          {name:"Wednesday",val:4,  selected:false, from: '00.00', to: '00.00'},
          {name:"Thursday",val:5, selected:false, from: '00.00', to: '00.00'},
          {name:"Friday",val:6, selected:false, from: '00.00', to: '00.00'},
          {name:"Saturday",val:7, selected:false, from: '00.00', to: '00.00'}
      ],
      string:'',
      dfrom: '00.00',
      dto: '00.00'
    }
  },
  methods: {
    getData() {
      this.string = ''
      let arr = []
      for (let item of this.day) {
        if (item.selected) {
          arr.push(item.val+'&'+item.from+'&'+item.to)         
        }
      }
      this.string = arr.join(',')
    },
    changeUpdate() {
        
    	for (let item of this.day) {
        if (item.selected) {
          item.from = this.dfrom
          item.to = this.dto
        }
      }
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app" style="padding:20px">
  <label>Set Default:</label>
  From: <input type="time" v-model="dfrom"/>
  To: <input type="time" v-model="dto"/>

  <br/><hr/>
  <label>Working Hours :</label>
  <div v-for="item in day">
    <input type="checkbox" value="item.val" v-model="item.selected" @change="changeUpdate">
    <label for="need" style=" width: 20%!important;">{{item.name}}</label>
    <span v-if="item.selected">
      <span>FROM</span>
      <input id="value.from" type="time" v-model="item.from" name="item.from">({{item.from}})
      &nbsp;&nbsp; --> &nbsp;&nbsp;
      <span>TO</span>
      <input id="item.to" type="time" v-model="item.to" name="item.to">({{item.to}})
    </span>
  </div>
  <button @click="getData">Save</button>
  <hr><hr>
  Saved data : {{string}}
</div>

希望这可以帮助.:)

Answer 2

上面的答案几乎涵盖了问题,问题是如果你改变你的默认小时,除非你取消选中并再次检查它,否则所选日期不会更新,但这里有观察员 拯救,观看(doh)时默认值更改,然后更新选定的天数.

(如果看不到,请在整页中打开摘录)

new Vue({
  el: '#app',
  data: function() {
    return {
      day:[
        {name:"Sunday",val:1},
        {name:"Monday",val:2},
      ],
      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>