工作时间选择？

在堆栈溢出中看到的对另一个问题的引用。
我查过这样的解决方案，但还没有成功。

 <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到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>