Lesson 20

src/components/BaseSelect.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <label v-if="label">{{ label }}</label>
+    <select :value="value" @input="updateValue" v-bind="$attrs">
+      <option
+        v-for="option in options"
+        :key="option"
+        :selected="option === value"
+      >
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseSelect",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  methods: {
+    updateValue(event) {
+      this.$emit("input", event.target.value);
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/views/EventCreate.vue

@@ -2,10 +2,12 @@
   <div>
     <h1>Create an Event</h1>
     <form @submit.prevent="createEvent">
-      <label>Select a category</label>
-      <select v-model="event.category">
-        <option v-for="cat in categories" :key="cat">{{ cat }}</option>
-      </select>
+      <BaseSelect
+        v-model="event.category"
+        :options="categories"
+        label="Select a category"
+        class="field"
+      />
 
       <h3>Name & describe your event</h3>
       <BaseInput
@@ -44,12 +46,12 @@
         />
       </div>
 
-      <div class="field">
-        <label>Select a time</label>
-        <select v-model="event.time">
-          <option v-for="time in times" :key="time">{{ time }}</option>
-        </select>
-      </div>
+      <BaseSelect
+        v-model="event.time"
+        :options="times"
+        label="Select a time"
+        class="field"
+      />
 
       <BaseInput type="submit" class="button -fill-gradient" value="Submit" />
     </form>