输入上的 v-model 返回输入元素而不是值答案

【问题标题】：v-model on input returning input element instead of value输入上的 v-model 返回输入元素而不是值
【发布时间】：2018-12-18 14:58:46
【问题描述】：

我正在尝试使用 Vue 设置用户登录和角色身份验证，而不使用 Vuex，因为它对于我们的应用程序的范围来说有点多。在最初尝试在 Vue 之外使用 jQuery AJAX 失败后，我决定让它与 Vue 的面向数据的模型一起工作，我一直在努力解决这个问题（我是一名设计师，而不是真正的开发人员）。我的后端开发人员正在使用纯 PHP 编写并使用 mySQL，以供参考。

受到this tutorial的启发，我正在尝试使用v-model通过axios将表单数据发送到服务器。

模板：

<form class="login-form" id="loginform" @submit.prevent="login">
    <div class="form-group space">
      <label class="float-label" for="username">Username</label>
      <input v-model="username" type="username" id="username" class="form-control" placeholder="username">
    </div>
    <div class="form-group">
      <label class="float-label" for="username">Password</label>
      <input v-model="password" type="password" id="password" class="form-control" placeholder="password">
    </div>
    <div class="form-group"> 
      <button type="submit" class="btn btn-primary float-right" id="login">Log in</button>
    </div>
 </form>

脚本：

export default {
  name: 'Login',
  data () {
    return {
        username: '',
    password: ''
    }
  },
  methods: {
 login: function () {
   const loginInfo = { username, password }
   console.log(loginInfo)
   new Promise ((resolve, reject) => {
  axios({url: 'api.com/index.php', data: loginInfo, method: 'POST' })
    .then(resp => {
      const token = resp.data.token
      localStorage.setItem('user_token', token) // store the token in localstorage
      const employeeId = resp.data.employee_id
      localStorage.setItem('employee_id', employeeId) // store the id in localstorage
      resolve(resp)
      console.log(resp);
    })
  .catch(err => {
    localStorage.removeItem('user_token') // if the request fails, remove any possible user token if possible
    reject(err)
  })
})
   // myLoginRoutine(loginInfo).then(() => {
   //   this.$router.push('/')
   // })
 }
}
}

请求没有问题，但没有返回任何内容！我决定检查一下我发送给他的内容...你瞧，const loginInfo 不是预期的输入值，而是{username: input#username.form-control, password: input#password.form-control}

坦率地说，我很困惑。我以前在表单输入上使用过 v-model 没有问题，并且不知道为什么会发生这种情况或如何解决它。有什么想法吗？

【问题讨论】：

你能把const loginInfo = { username, password }改成const loginInfo = { this.username, this.password }并分享结果吗？
它抛出Syntax error: this is a reserved word
对不起，像这样：const loginInfo = { username: this.username, password: this.password } - 当然你的后端需要一个具有这种结构的对象。
你，先生，是我的英雄。
顺便说一句：伪装后端/API 的真实 url 是个好主意，因为只要它在网络上就对公众开放。

标签： javascript post vue.js data-binding axios

【解决方案1】：

对于未来的访问者：axios data 需要一个带有这些键的对象作为后端，但您没有正确填充该对象。

改变

const loginInfo = { username, password }

到

const loginInfo = { username: this.username, password: this.password }

【讨论】：