Vue

by Damian Dulisz

HTML

<div id="app">
 <form method="post" id="bookingForm" class="bookingForm">
    <label for="fname">First name:</label>
    <input type="text" name="fname" v-model="form.firstName">
    <br>
    <label for="lname">Last name:</label>
    <input type="text" name="lname" v-model="form.lastName">
    
    <br>
      
    <label for="fname">Select Movie:</label>
    <select name="movie" v-model="form.movie">
      <option v-for="movie of movies" :value="movie.name">
        {{ movie.name }}
      </option>
    </select>
    
    <br>
    
    <div v-if="form.movie">
      <label for="fname">Select Movie:</label>
      <select name="time" multiple="multiple" size="4" v-model="form.hours">
        <option v-for="hour of selectedMovie.hours" :value="hour">
          {{ hour }}
        </option>
      </select>
    </div>    
    
    <button type="button" @click="send">
      SEND!
    </button>
    
    <pre>{{ form }}</pre>
  </form>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

label {
  margin-top: 10px;
  display: block;
}

pre {
  margin-top: 50px;
}

button {
  padding: 6px 18px;
  margin-top: 15px;
  background: blue;
  color: white;
  border: none;
  font-weight: bold;
}

Vue

new Vue({
  el: "#app",
  data: {
    form: {
      firstName: '',
      lastName: '',
      movie: '',
      hours: []
    },
    movies: [
      {
        name: "Spiderman: Far from Home",
        hours: ['18:00', '19:30', '21:45']
      },
      {
        name: "Men in Black: International",
        hours: ['17:00', '19:00', '21:00']
      },
      {
        name: "The Lion King",
        hours: ['13:00', '15:30', '19:00']
      },
      {
        name: "Toy Story 4",
        hours: ['14:00', '16:30', '18:45']
      } 
    ]
  },
  computed: {
  	selectedMovie () {
      return this.movies
      	.find(movie => movie.name === this.form.movie)
    }
  },
  methods: {
    send () {
    	window.alert(JSON.stringify(this.form))
    }
  }
})