조직의 근무 시간 추가

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/

를