Javascript 输入上的v模型返回输入元素而不是值

Javascript 输入上的v模型返回输入元素而不是值,javascript,post,vue.js,data-binding,axios,Javascript,Post,Vue.js,Data Binding,Axios,我正在尝试使用Vue设置用户登录和角色身份验证,而不使用Vuex,因为这对我们的应用程序范围有点大。在Vue之外使用jQueryAjax的最初尝试失败后,我决定让它与Vue的面向数据的模型一起工作,我一直在努力解决这个问题(我是一名设计师,不是真正的开发人员)。我的后端开发人员使用纯PHP编写,并使用mySQL作为参考 受此启发,我尝试使用v-model通过axios将表单数据发送到服务器 模板: <form class="login-form" id="loginform" @submi

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

受此启发,我尝试使用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>
请求通过没有问题,但没有返回任何内容!我决定看看我给他寄了什么。。。你瞧,
const loginInfo
并不是预期的输入值,而是
{username:input#username.form-control,password:input#password.form-control}


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

面向未来的访问者:axios
数据
希望有一个带有这些键的对象作为后端,但您没有正确填充该对象

改变

const loginInfo={username,password}


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

能否将
const-loginInfo={username,password}
更改为
const-loginInfo={this.username,this.password}
并共享结果?它抛出
语法错误:这是一个保留字
对不起,像这样:
const loginInfo={username:this.username,password:this.password}
-当然你的后端需要一个具有这种结构的对象。你,先生,是我的英雄。顺便说一句:如果你的后端/API的真实url在web上是对公众开放的,那么伪装它将是一个好主意。
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('/')
   // })
 }
}
}