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

我有以下標記。如何使用Vue獲取表單中的所有數據

<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天，我無法弄清楚如何解決這個問題。

來源

2016-02-27 user1012181

嘗試使用計算變量。在您的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到您的隱藏輸入，或提交selectedDays變量直接用ajax

來源

2016-02-27 03:21:22 Jeff

因此，如果我檢查一個日期，'selectedDays'將是一個包含'[mon，tue']'的數組等等。如果我還需要傳遞時間以及這個「變量」？另外，如何再次重複此操作，以便我可以將另一組值添加到隱藏字段？ – user1012181

不知道什麼weekends或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

來源

2016-12-25 07:46:45 ctf0

你試過：

//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數組中

來源

2017-11-15 16:05:15 JOjohn

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

回答

相關問題