javascript - 添加组织的工作时间

Question

如果我选择周日、周一和工作时间从08.00到20.00我需要发送1&08:00&20:00,2&08:00&20:00。我怎样才能在 vue javascript 中实现相同的功能？

我当前的代码是

<script>
submitBox = new Vue({
  el: "#submitBox",
  data: {
    articles: [],
    services: [],
    username: '',
    category: '',
    subcategory: [],
    image: '',
    hours: '',

  },
  methods: {
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },

    handelSubmit: function(e) {
      var vm = this;
      data = {};
      data['lat'] = this.$refs.myLatField.value;
      data['lng'] = this.$refs.myLngField.value;
      data['username'] = this.username;
      data['category'] = this.category;
      data['subcategory'] = this.subcategory;
      data['image'] = this.image;
      data['hours'] = this.hours;
      $.ajax({
        url: 'http://127.0.0.1:8000/api/add/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if (e.status) {
            alert("Registration Success")

            window.location.href = "https://localhost/n2s/registersuccess.html";
          } else {
            vm.response = e;

            alert("Registration Failed")
          }
        }
      });
      return false;
    }
  },
});
</script>

我的 html 表单是

<div id="submitBox">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <input type="checkbox" value="1" v-model="hours">Sunday
    <select>From
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select>
    <select>To
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select><br>
    <input type="checkbox" value="2" v-model="hours">Monday
    <select>
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select>
    <select>
    <option value="">08.00</option>
    <option value="">12.00</option>
    <option value="">20.00</option>
    <option value="">24.00</option>
    </select><br>
  </form>
</div>

我能够传递所有其他值。所以，我没有将其包含在表格中。

我怎样才能选择日期和工作时间并相应地传递它。请帮我解决同样的问题

Answer 1

我不熟悉 vue.js，但你可以尝试类似的东西:

   new Vue({
  el: '#example-3',
  data: {
    day:[
    {name:"Sunday",val:1},
    {name:"Monday",val:2}
    ],
    string:''
  },
   methods: {
    generate: function (event) {
    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(',');
    }
    }
})

html:

<div id='example-3'>
  <div v-for="value in day">
    <input type="checkbox" id="sun" value="value.val" v-model="value.selected">
    <label for="sun">{{value.name}}</label>
    <select v-model="value.from">From
      <option value="08.00">08.00</option>
      <option value="12.00">12.00</option>
      <option value="20.00">20.00</option>
      <option value="24.00">24.00</option>
    </select>
    <select v-model="value.to">To
      <option value="08.00">08.00</option>
      <option value="12.00">12.00</option>
      <option value="20.00">20.00</option>
      <option value="24.00">24.00</option>
    </select>
    <br>

  </div>
  <button v-on:click="generate">generate</button>
  <span>string: {{ string }}</span>

演示:https://jsfiddle.net/d8ak8ob6/1/