syntax error when compiling method in .vue component

Question

I am following a tutorial (https://savvyapps.com/blog/definitive-guide-building-web-app-vuejs-firebase) to build a vue.js app and in one of the sections of the guide it directed me to add a login() function in the block of the Login.vue file.

    login() {
      fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then(user => {
        this.$store.commit('setCurrentUser', user)
        this.$store.dispatch('fetchUserProfile')
        this.$router.push('/dashboard')
      }).catch(err => {
        console.log(err)
      }) 
    }

However, when it is compiled I get an error:

    ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue
Module build failed: SyntaxError: C:/Users/Rohit/Documents/Javascript/vue_practice/humanity/src/components/Login.vue: Unexpected token, expected ; (33:8)

  31 | const fb = require('../firebaseConfig.js')
  32 | 
> 33 | login() {
     |         ^
  34 |     fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then(user => {
  35 |         this.$store.commit('setCurrentUser', user)
  36 |         this.$store.dispatch('fetchUserProfile')

 @ ./src/components/Login.vue 4:0-105 5:0-118
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I have been trying my best to figure out what the syntax error is but to no avail. Thanks in advance for the help!

Decade Moon · Accepted Answer · 2018-09-13 22:47:15Z

4

login() belongs in the methods object of the component:

export default {
  methods: {
    login() {
      ...
    }
  }
}

answered Sep 13, 2018 at 22:47

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2018-09-13 23:34:20Z

3

In your script section you must have the following structure :

<script>
const fb = require('../firebaseConfig.js')
export default{
 data(){
     return { ... };
  },
methods:{
   ...
    login() {
      fb.auth.signInWithEmailAndPassword(this.loginForm.email, 
       this.loginForm.password).then(user => {
        this.$store.commit('setCurrentUser', user)
       this.$store.dispatch('fetchUserProfile')
       this.$router.push('/dashboard')
     }).catch(err => {
    console.log(err)
     }) 
    }
  ...
   }
}
</script>

answered Sep 13, 2018 at 23:34

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

syntax error when compiling method in .vue component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related