Vue.js not recognizing data keys

Question

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?

nanobar · Accepted Answer · 2017-01-13 16:28:49Z

2

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

data: function() {
  return {
    firstname: '',
  }
}

answered Jan 13, 2017 at 16:28

nanobar

66.8k26 gold badges156 silver badges179 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 22:47:01Z

1

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

  data: function () {
    return {
      'firstname': '',
    }
  }

edited Jul 15, 2022 at 22:47

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 13, 2017 at 16:29

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

1 Comment

softcode Over a year ago

Yeah that was overlooked

Collectives™ on Stack Overflow

Vue.js not recognizing data keys

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related