vue组件里input绑定v-model为什么会报错？

Question

组件没有提出来，都写在一个文件里的

// index.js

// Login组件里的第一个 input 绑定了一个 v-model='username'
const Login = { template: '<form class="form login"><h2>登陆</h2><input v-model="username" type="username" class="form-control" placeholder="username" required autofocus><input class="form-control" type="password" placeholder="Password" required><button type="submit">登陆</button></form>' }
const SignUp = { template: '<form class="form signup"><h2>注册新用户</h2><input type="username" id="inputUsername" class="form-control" placeholder="username" required autofocus><input type="password" id="inputPassword" class="form-control" placeholder="Password" required><input type="email" id="inputEmail" class="form-control" placeholder="Email address" required><button type="submit">注册</button></form>' }

const routes = [
  { path: '/', component: Login },
  { path: '/login', component: Login },
  { path: '/signUp', component: SignUp }
]

const router = new VueRouter({
  routes 
})

// 在data里面也有 username
const app = new Vue({
  router,
  data: {
      username: ''
  }
}).$mount('#app')

为什么会报错：

去掉 v-model='username' 和 data 是能够正常运行的
如果我想获取 input 里用户输入的值应该怎么做呢

Answer 1

每个组件内部，对应 data,需要对象里面设置 data 属性。

const Login = {data(){return {username:""}},template: ...

Answer 2

你需要在Login里面声明data才行

Answer 3

报错就是属性或者方法"username"未定义，那估计就是input的type值username未定义

Answer 4

type="username"应该是这个报错了。把这个删掉试试。data里面的username应该就是input的value。