NewWorkout.vue

<template>
  <div>
    <button @click="newWorkoutButton">New Workout</button><br><br>
    <div id="workout-form" v-if="newWorkout">
      <h2>New Workout</h2>
       <input type="text" placeholder="Area you worked out." v-model="areaWorkedOut"><br>
       <input type="text" placeholder="Workout length in minutes" v-model="workoutLength"><br>
       <input type="text" placeholder="Current mood, eg: lazy, tired etc." v-model="workoutMood"/><br>
       <textarea name="textarea" rows="5" cols="25" placeholder="Notes" v-model="notes"></textarea><br><br>
       <button @click="createWorkout">Submit</button>
    </div>
  </div>

</template>


<script>

import Vue from 'vue';

const NewWorkout = Vue.extend ({
  data () {
    return {
      newWorkout: false

    }
  },
  methods: {
    newWorkoutButton() {
      this.newWorkout = true;
    },
    createWorkout() {
      newWorkoutData = {

      }
    }
  }
});

export default NewWorkout;

</script>

<style>

</style>