v-model on input returning input element instead of value

Question

I am attempting to set up user login and role authentication with Vue, without using Vuex, as it's a bit much for the scope of our application. After a failed initial attempt to use jQuery AJAX outside of Vue, I resigned myself to making it work with Vue's data-oriented model, which I've been struggling with (I'm a designer by trade, not really a developer). My backend developer is writing in plain PHP and using mySQL, for reference.

Taking inspiration from this tutorial, I am trying to use v-model to send the form data to the server via axios.

Template:

<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>

Script:

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('/')
   // })
 }
}
}

The request was going through no problem, but wasn't returning anything! I decided to check and see what I was sending him... and lo and behold, const loginInfo was not the input value, as expected, but {username: input#username.form-control, password: input#password.form-control}

I am, quite frankly, very confused. I've used v-model previously on form inputs with no issues, and have no clue why this is happening or how to fix it. Any thoughts?

Could you change const loginInfo = { username, password } to const loginInfo = { this.username, this.password } and share the results? — Bennett Dams
– Bennett Dams, Commented Jul 10, 2018 at 17:08
Sorry, like so: const loginInfo = { username: this.username, password: this.password } - of course your backend needs to expect an object with this structure. — Bennett Dams
– Bennett Dams, Commented Jul 10, 2018 at 17:13
BTW: It would be a good idea to disguise the real url of your backend/API as it's open to the public as long it's on the web. — Bennett Dams
– Bennett Dams, Commented Jul 10, 2018 at 17:28

Bennett Dams · Accepted Answer · 2018-07-10 17:18:34Z

2

For future visitors: The axios data expects an object with those keys for the backend, but you don't fill the object properly.

Change

const loginInfo = { username, password }

to

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

answered Jul 10, 2018 at 17:18

Bennett Dams

7,1836 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

v-model on input returning input element instead of value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related