工作时间选择？

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

如果我试试这段代码。我 select 每天都需要分别 select 工作时间。相反，我需要先选择一个时间，然后在我选择的所有日子里都使用该工作时间。此外，如果用户需要更改时间，请提供编辑选项。那里给出了这个问题的解决方案，但不是基于上面给出的代码。

是否可以有这样的解决方案？ Select 一开始是一个工作小时，然后整天都在使用它 select 即。复选框，并根据需要更改值。

仅供实验之用。如果可能的话，请帮助我。

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

上面的答案几乎涵盖了问题，问题是如果您更改默认时间，所选日期将不会更新，除非您取消选中并再次选中，但这里 Watchers rescue, watch (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>

工作时间选择？

Working hours selection?

html

javascript

vue.js

vue-router

vue-component