如何使用Vue從表單獲取所有數據

Question

我有以下標記。

<div class="checkbox">
  <label>
    <input class="weekdays" name="wednesday[]" v-model="wed.selected" id="wednesday" type="checkbox"> Wed &nbsp; &nbsp;
  </label>
</div>
<div class="checkbox">
  <label>
    <input class="weekdays" name="thursday[]" v-model="thu.selected" id="thursday" type="checkbox"> Thu &nbsp; &nbsp;
  </label>
</div>

一周中的其他所有時間類似。 在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);
            }
        }
    }
});

但這似乎不起作用。 我要在這里做的是，當我單擊一個按鈕時，我想將所有選中的日期和時間添加到一個變量selectedDays ，並將其添加到一個隱藏的輸入字段中（json序列化數據）。嘗試不是很好。

有人可以指引我正確的方向嗎？ 我已經花了3天的時間，無法解決該問題。

Answer 1

你有沒有嘗試過：

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

對於js：

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

這直接來自文檔。 它將所有選中的復選框的值壓入chackedNames數組

Answer 2

嘗試使用計算變量。 在您的Vue組件中：

computed:{
  selectedDays:function(){
    var days = [];
      if(mon.selected)
        days.push('mon');
      if(tues.selected)
        days.push('tues')
      //do for each day

      return days;
  }
}

現在，每次您訪問selectedDays變量時，它將自動更新。 無需在提交時檢查它，只需對其進行v-model到您的隱藏輸入中，或直接使用ajax提交selectedDays變量

Answer 3

不確定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> 

更多例子

http://codepen.io/ctf0/pen/LbKYjg

http://codepen.io/ctf0/pen/JbQEZa

http://codepen.io/ctf0/pen/GNbrGK