如果我选择周日,周一和从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>
我能够传递所有其他值。所以,我没有把它包含在表格中。
我怎样才能选择日期和工作时间并相应地传递它。请帮我解决一下
我不熟悉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>
但是:ぁzxswい