Как получить все данные из формы с помощью Vue

Question

Как получить все данные из формы с помощью 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 дня и не мог понять, как это сделать. исправить это.

1162 3

javascript vue.js

3 ответов:

Comments

Ничего не найдено.

Jeff · Accepted Answer · 2016-02-27 05:21:22

Попробуйте использовать вычисляемую переменную. В вашем компоненте 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, она будет автоматически обновляться. Нет необходимости проверять его на-submit, просто v-model его на ваш скрытый вход, или отправить переменную selectedDays непосредственно с помощью ajax

JOjohn · Accepted Answer · 2017-11-15 18:05:15

Вы пробовали:

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

ctf0 · Accepted Answer · 2016-12-27 10:14:13

Не уверен, для чего предназначены 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