如何使用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获取表单中的所有数据

回答

相关问题