Following the tutorial, but am not getting any elements to render

[boriskogan81]

Hi,

Thanks for the tutorial. It's very well written and easy to follow. However, I'm getting stuck and don't know how to troubleshoot.

I can see the Root and App.vue components when I inspect the page, but trying to navigate to /signup and /login doesn't load those components. I have no idea how to troubleshoot this, being new to Vue.

Here is my router index.js file:

import Vue from 'vue'
import Router from 'vue-router'
import SignUpForm from '@/components/Auth/SignUpForm'
import LogInForm from '@/components/Auth/LogInForm'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      component: LogInForm
    },
    {
      path: '/signup',
      component: SignUpForm
    }
  ]
})

And here is my LogInForm.vue:

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Log In</h2>

      <Notification
        :message="notification.message"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="login">
        <div class="field">
          <label>Email</label>
          <input type="email" name="email" v-model="email" placeholder="Email" required>
        </div>

        <div class="field">
          <label>Password</label>
          <input type="password" name="password" v-model="password" placeholder="Password" required>
        </div>

        <button class="fluid ui primary button">LOG IN</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Don't have an account? <router-link to="/signup">Sign Up</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* global axios */
import Notification from '@/components/Notification'

export default {
  name: 'LogInForm',
  components: {
    Notification
  },
  data () {
    return {
      email: '',
      password: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    const token = localStorage.getItem('tweetr-token')

    return token ? next('/') : next()
  },
  methods: {
    login () {
      axios
        .post('/login', {
          email: this.email,
          password: this.password
        })
        .then(response => {
          // save token in localstorage
          localStorage.setItem('tweetr-token', response.data.data.token)

          // redirect to user home
          this.$router.push('/')
        })
        .catch(error => {
          // clear form inputs
          this.email = this.password = ''

          // display error notification
          this.notification = Object.assign({}, this.notification, {
            message: error.response.data.message,
            type: error.response.data.status
          })
        })
    }
  }
}
</script>

Any clue what I might be doing wrong, or how I should go about troubleshooting?

[ammezie]

Try checking your browser console to see if there are any errors.

[boriskogan81]

There are no errors, but the relevant components do not appear in the tree.

On Sun, Apr 15, 2018, 6:16 PM Chimezie Enyinnaya notifications@github.com wrote:

Try checking your browser console to see if there are any errors.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ammezie/tweetr-app/issues/1#issuecomment-381414059, or mute the thread https://github.com/notifications/unsubscribe-auth/AJzZ6yuhgVWVnnC0R1OtkVJ00g04oahzks5to2RRgaJpZM4TVe-v .