Updating work

README.md

@@ -39,12 +39,6 @@ beforeRouteLeave(routeTo, routeFrom, next) {
 }
 ```
 
-### Base Form elements
-
-- Look up `vue-multiselect` for when you want to use a select field and the options have objects in them.
-- `v-on="$listeners"` means that this element inherits the listners of the parent component
-- `v-bind="$attrs"` won't work for inheriting class and style attributes
-
 ### Global Route Gaurds & Per Route Gaurds
 
 Global Route Gaurds allow us to add hooks that run whenever nagigation is triggered. These gaurds are called on the `router` object. We need to set the `router` object to a contant.
@@ -99,6 +93,26 @@ _NOTE:_ Since `beforeEnter` is only called when the component is created it's us
 
 _NOTE2:_ Vue Router may get another per-route guard called beforeResolve which called on Create and Update. If it is available it would be a more elegant solution to our pagination problem.
 
+### Base Form elements
+
+- Look up `vue-multiselect` for when you want to use a select field and the options have objects in them.
+- `v-on="$listeners"` means that this element inherits the listners of the parent component
+- `v-bind="$attrs"` won't work for inheriting class and style attributes. Vue will have $class and $style I believe
+
+### Form Validation
+
+`npm install vuelidate --save`
+
+Adding `validations` to our component adds a computed property `$v` to our component. This object will have boolean values for the associated validators. When all validators pass `$v.$invalid: false`.
+
+### Advanced folder structure
+
+📂 A pages directory for your Application views and routes.
+
+📂 A layouts directory for your layout templates.
+
+📂 A store directory for your Vuex store files.
+
 ## Following along?
 
 We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.

package-lock.json

@@ -12684,6 +12684,11 @@
       "resolved": "https://registry.npmjs.org/vuejs-datepicker/-/vuejs-datepicker-1.5.3.tgz",
       "integrity": "sha512-vCYLx7rbYPEqLLx1EplFQHxkMA/SAFJvwj5PYzeaG98q7hynLZMXsvhE8FPr08PJUiKA+zRknq0CqRioNYLYkg=="
     },
+    "vuelidate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
+      "integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^1.5.3",
+    "vuelidate": "^0.7.4",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/NavBar.vue

@@ -2,7 +2,7 @@
   <div id="nav" class="nav">
     <router-link to="/" class="brand">Real World Events</router-link>
     <nav>
-      <router-link :to="{ name: 'event-list' }">List</router-link> |
+      <router-link :to="{ name: 'event-list' }">List</router-link>|
       <router-link :to="{ name: 'event-create' }">Create</router-link>
     </nav>
   </div>

src/main.js

@@ -7,6 +7,9 @@ import store from './store/store'
 import BaseIcon from '@/components/BaseIcon'
 // Here we need the styles for nprogress
 import 'nprogress/nprogress.css'
+import Vuelidate from 'vuelidate'
+
+Vue.use(Vuelidate)
 
 Vue.component('BaseIcon', BaseIcon)
 

src/router.js

@@ -7,6 +7,7 @@ import NProgress from 'nprogress'
 import store from '@/store/store'
 import NotFound from './views/NotFound.vue'
 import NetworkIssue from './views/NetworkIssue.vue'
+import Example from './views/Example.vue'
 
 Vue.use(Router)
 
@@ -20,6 +21,10 @@ const router = new Router({
       component: EventList,
       props: true
     },
+    {
+      path: '/example',
+      component: Example
+    },
     {
       path: '/event/create',
       name: 'event-create',

src/views/EventShow.vue

@@ -18,7 +18,11 @@
 
     <h2>
       Attendees
-      <span class="badge -fill-gradient">{{ event.attendees ? event.attendees.length : 0 }}</span>
+      <span class="badge -fill-gradient">
+        {{
+        event.attendees ? event.attendees.length : 0
+        }}
+      </span>
     </h2>
     <ul class="list-group">
       <li v-for="(attendee, index) in event.attendees" :key="index" class="list-item">

src/views/Example.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>Example for vuelidate</h1>
+    <input type="email" placeholder="What's your email" v-model="email">
+    <p v-if="!$v.email.email">Please enter a valid email.</p>
+    <p v-if="!$v.email.required">Email is required.</p>
+    <button :disabled="!$v.$invalid" type="submit">Submit</button>
+  </div>
+</template>
+
+<script>
+import { required, email } from 'vuelidate/lib/validators'
+
+export default {
+  data() {
+    return {
+      email: null
+    }
+  },
+  validations: {
+    email: {
+      required, // Required validator ensures that the field has a value.
+      email // Email validator ensures that the value is indeed an email
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>