javascript - 如何在vue js中首先选择一个时间并在所有日子中使用它？

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

创建一个组件来表示一天，该组件接收默认时间值作为 Prop 。作为数据项，它有一个 bool 值来指示是否使用默认值，以及在不使用默认值时使用的 from 和 to 值。

work = new Vue({
      el: "#work",
      data: {
        defaultWorkingHours: {
          from: null,
          to: null
        },
        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
          }
        ],
        components: {
          dayComponent: {
            template: "#day-template",
            props: ['name', 'val', 'defaultFrom', 'defaultTo'],
            data() {
              return {
                useDefaultTimes: true,
                from: null,
                to: null
              };
            }
          }
        }
      });

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="work">
  <div class="form-group">
    <label>Working Hours :</label>
    <label>
      From
      <input type="time" v-model="defaultWorkingHours.from">
    </label>
    <label>
      To
      <input type="time" v-model="defaultWorkingHours.to">
    </label>
    <div v-for="d in day" class="checkboxFour">
      <day-component :name="d.name" :val="d.val" :default-from="defaultWorkingHours.from" :default-to="defaultWorkingHours.to"></day-component>
    </div>
  </div>
</div>

<template id="day-template">
  <div>
    {{name}}
    <input type="checkbox" v-model="useDefaultTimes">
    <label>
      FROM
      <template v-if="useDefaultTimes">
        <input :value="defaultFrom" name="value.from" disabled>
      </template>
<template v-else>
        <input type="time" v-model="from" name="value.from">
      </template>
</label>
<label>
      FROM
      <template v-if="useDefaultTimes">
        <input :value="defaultTo" name="value.to" disabled>
      </template>
      <template v-else>
        <input type="time" v-model="to" name="value.to">
      </template>
    </label>
</div>
</template>