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＆amp; JS

＆＃13;

    object_story_spec: JSON.stringify({
      page_id: process.env.FB_PAGE_ID,
      template_data: {
        description: '{{product.description}}',
        link: 'redacted',
        name: '{{product.name | titleize}}',
      },
      image_overlay_spec: JSON.stringify({
        overlay_template: 'pill_with_text',
        text_font: 'droid_serif_regular',
        text_type: 'price',
        position: 'top_right',
        theme_color: 'background_e50900_text_fffff',
        float_with_margin: 'true',
      }),
    }),

＆＃13;

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')

＆＃13;

希望这会有所帮助。：）

Answer 2

上面的答案几乎涵盖了问题，问题是如果您更改默认小时，除非您取消选中并再次检查，否则所选日期不会更新，但这里有Watchers救援，当默认值更改时观察（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>

工作时间选择？

2 个答案: