event-form.js

import EntryUser from  './cmp/entry-user';
import DatetimeInput from './cmp/ui/datetime-input';

new Vue({
  el: '#event-form',
  components: {
    EntryUser,
    DatetimeInput
  },
  data: {
    form: {
      isOnline: false,
      dateBegin: '2016/03/30 02:17',
      dateEnd: '2016/03/30 02:17',
      users: function() {
        return this.users.map((user) => user.id);
      }
    },
    users: [
      {
        id: 1,
        imageUrl: 'https://s3.amazonaws.com/37assets/svn/1667-jz-avatar-blue.png',
        name: 'Виталий Виталиевич',
        tags: '#frontend #javascript',
        canSubscribe: true,
        subscibersCount: 123,
        speakerCount: 321,
        isSubscribed: false
      },
      {
        id: 2,
        imageUrl: 'https://s3.amazonaws.com/37assets/svn/1667-jz-avatar-blue.png',
        name: 'Виталий Виталиевич',
        tags: '#frontend #javascript',
        canSubscribe: true,
        subscibersCount: 123,
        speakerCount: 321,
        isSubscribed: true
      }
    ]
  },
  methods: {
    addUserButtonClick: function() {
      this.users.unshift({
        id: 2,
        imageUrl: 'https://s3.amazonaws.com/37assets/svn/1667-jz-avatar-blue.png',
        name: 'Виталий Виталиевич',
        tags: '#frontend #javascript',
        canSubscribe: true,
        subscibersCount: 123,
        speakerCount: 321,
        isSubscribed: true
      });
    },
    removeUserButtonClick: function(index) {
      this.users.splice(index, 1);
    },
    formSubmit: function() {
      $.post('/', this.form);
    }
  }
});