Vue.js无法识别数据键

Question

按照官方指南，我试图构建一个简单的表单，将其输入输出到同一个模板的div中。

这里是我的代码

<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> 

这里是错误：

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

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


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

我试图

• 从数据键删除引号
• 变化数据功能到对象

坦白地说，因为这与文档非常接近。

任何想法？

Answer 1

data必须是必须返回的数据变量的对象的功能，如下列：

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

Answer 2

你必须为你不是真正的函数返回一个对象语法错误：

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