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: '', 
    } 
}