如何使用Vue从表单中获取所有数据答案

【问题标题】：How do I get all data from a form using Vue如何使用Vue从表单中获取所有数据
【发布时间】：2016-02-27 03:11:23
【问题描述】：

我有以下标记。

<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 天时间，我无法弄清楚如何解决这个问题。

【问题讨论】：

标签： javascript vue.js

【解决方案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: []
  }
})

这直接来自文档。它会将所有选中的复选框的值推送到 chhackedNames 数组中

【讨论】：

【解决方案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 变量

【讨论】：

所以，如果我检查一个日期，selectedDays 将是一个带有[mon, tue'] 等的数组。如果我还需要与这个variable 一起打发时间怎么办？另外，如何再次重复此操作，以便将另一组值添加到隐藏字段？

【解决方案3】：

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

【讨论】：