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: function() {
  return {
    firstname: '',
  }
}

Answer 2

data必须是一个必须返回已定义数据变量对象的函数，如下所示：

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

Vue.js无法识别数据密钥

2 个答案: