Meeting participants

Extract child component: form

The App component is getting pretty huge. Extract the form to its own component. Receive the submitted data with the @event handler.

Your code should look like this:

App.vue:

<template>
  <div>
    <!-- here is the list -->

    <h3>New participant</h3>
    <new-participant-form @added="addNewParticipant($event)"></new-participant-form>
  </div>
</template>

<script>
  import NewParticipantForm from "./NewParticipantForm.vue";

  export default {
    components: {NewParticipantForm},
    data() {
      return {/* ... */};
    },
    methods: {
      /* ... */
      addNewParticipant(participant) {
        /* ... */
      }
    }
  };
</script>

NewParticipantForm.vue:

<template>
  <div>
    <form @submit.prevent="add()">
      <!-- the form -->
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {newParticipant: {}};
    },
    methods: {
      add() {
        this.$emit('added', this.newParticipant);
        this.newParticipant = {};
      }
    }
  };
</script>