[英]How do I get all data from a form using Vue
I've the following markup. 我有以下标记。
<div class="checkbox">
<label>
<input class="weekdays" name="wednesday[]" v-model="wed.selected" id="wednesday" type="checkbox"> Wed
</label>
</div>
<div class="checkbox">
<label>
<input class="weekdays" name="thursday[]" v-model="thu.selected" id="thursday" type="checkbox"> Thu
</label>
</div>
Similarly for all other days of the week. 一周中的其他所有时间类似。 And in the Vue instance:
在Vue实例中:
new Vue({
el: '#provider',
data: {
mon: {selected: false, day: 'Mondays'},
tue: {selected: false, day: 'Tuesdays'},
wed: {selected: false, day: 'Wednesdays'},
thu: {selected: false, day: 'Thursdays'},
fri: {selected: false, day: 'Fridays'},
sat: {selected: false, day: 'Saturdays'},
sun: {selected: false, day: 'Sundays'},
weekends: {selected: false, day: 'Weekends'},
weekdays: {selected: false, day: 'Weekdays'},
fromTime: '',
toTime: '',
selectedDays:[{
days : [],
from: '',
to:''
}]
},
methods: {
addAvailability: function() {
if(this.mon.selected)
{
var days = [];
days.push(this.mon.day);
this.selectedDays['days'].push(days);
}
}
}
});
But this seems not working. 但这似乎不起作用。 What I'm trying to do here is when I click on a button, I want to add all checked days and time in to a variable
selectedDays
and add it to a hidden input field (json serialize the data).But what I've tried is not working well. 我要在这里做的是,当我单击一个按钮时,我想将所有选中的日期和时间添加到一个变量
selectedDays
,并将其添加到一个隐藏的输入字段中(json序列化数据)。尝试不是很好。
Can anybody direct me to the right direction? 有人可以指引我正确的方向吗? I've spent 3 days and I couldn't figure out how to fix this.
我已经花了3天的时间,无法解决该问题。
Have you tried: 你有没有尝试过:
//HTML
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
and for js: 对于js:
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
This is straight from the documentation. 这直接来自文档。 it will push all selected checkbox's value into the chackedNames array
它将所有选中的复选框的值压入chackedNames数组
Try using a computed variable. 尝试使用计算变量。 In your vue component:
在您的Vue组件中:
computed:{
selectedDays:function(){
var days = [];
if(mon.selected)
days.push('mon');
if(tues.selected)
days.push('tues')
//do for each day
return days;
}
}
Now every time you access the selectedDays
variable, it will be automatically updated. 现在,每次您访问
selectedDays
变量时,它将自动更新。 No need to check it on-submit, just v-model
it to your hidden input, or submit the selectedDays
variable directly using ajax 无需在提交时检查它,只需对其进行
v-model
到您的隐藏输入中,或直接使用ajax提交selectedDays
变量
not sure what weekends
or weekdays
are for but here is a working example 不确定
weekends
或weekdays
是什么weekdays
,但这是一个有效的示例
new Vue({ el: '#provider', data: { days: [ {name: 'Mondays', selected: false, from: '', to:''}, {name: 'Tuesdays', selected: false, from: '', to:''}, {name: 'Wednesdays', selected: false, from: '', to:''}, {name: 'Thursdays', selected: false, from: '', to:''}, {name: 'Fridays', selected: false, from: '', to:''}, {name: 'Saturdays', selected: false, from: '', to:''}, {name: 'Sundays', selected: false, from: '', to:''}, ], weekends: {selected: false, day: 'Weekends'}, weekdays: {selected: false, day: 'Weekdays'}, }, computed: { selectedDays: function() { return this.days.filter(function(item) { return item.selected; }); } } });
<script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="provider"> <div v-for="day in days"> <label :for="day.name"> <input type="checkbox" name="days" :id="day.name" :value="day.name" :checked="day.selected" v-model="day.selected"> {{day.name}} <input type="text" v-model="day.from"> <input type="text" v-model="day.to"> </label> </div> <hr> {{selectedDays}} </div>
more examples 更多例子
http://codepen.io/ctf0/pen/LbKYjg http://codepen.io/ctf0/pen/LbKYjg
http://codepen.io/ctf0/pen/JbQEZa http://codepen.io/ctf0/pen/JbQEZa
http://codepen.io/ctf0/pen/GNbrGK http://codepen.io/ctf0/pen/GNbrGK
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.