current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

Following the official guide, I am trying to build a simple form that outputs its input into a div on the same template.

Here is my code 

<template lang="html">
  <div>
    <input type="text" name="firstname" value="" v-model="firstname">
    <input type="submit">

    <div>
      <h1>First name</h1>
      <p>{{ firstname }}</p>
    </div>

  </div>
</template>

<script>
  export default {
    data: function() {
      'firstname': '',
    }
  }
</script>

<style>
</style>

And here is the error:

SyntaxError: Unexpected token, expected ; (28:15)

  26 | export default {
  27 |   data: function() {
> 28 |     'firstname': '',
     |                ^    


 @ ./src/App.vue 8:18-97

I have tried to

  • remove the quotes from the data keys
  • change the data function to an object

Frankly out of ideas as this is so close to the documentation.

Any ideas?

share|improve this question
up vote 2 down vote accepted

data must be a function which must return the object of defined data variables, like following:

  data: function () {
    return {
      'firstname': '',
    }
  }
share|improve this answer
    
Yeah that was overlooked – softcode Jan 13 at 16:43
up vote 2 down vote

You have a syntax error as you're not actually returning an object in the function:

data: function() {
  return {
    firstname: '',
  }
}
share|improve this answer
1  
Giving the points to the underdog – softcode Jan 13 at 16:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.