Arbeitszeiten einer Organisation hinzufügen

Question

Wenn ich Sonntag, Montag und Arbeitszeiten von 08.00 bis auswähle, muss ich 1&08:00&20:00,2&08:00&20:00 senden. Wie kann ich das in vue javascript implementieren?

Mein aktueller Code ist

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

Mein HTML-Formular ist

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

Ich bin in der Lage, alle anderen Werte zu übergeben. Also habe ich das nicht in das Formular aufgenommen.

Wie kann ich Tag und Arbeitsstunden auswählen und entsprechend übergeben? Bitte helfen Sie mir die gleiche

zu lösen

Answer 1

ich mit vue.js nicht vertraut bin, aber Sie können wie etwas versuchen:

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> 

Demo: https://jsfiddle.net/d8ak8ob6/1/