входное значение vuejs не определено

20.10.2019 12:07:45 Просмотров 97 Источник

в настоящее время я изучаю vuejs, делая приложение для входа в систему, однако я могу получить доступ к значению ввода, которое он дал мне неопределенным , я явно делаю что-то не так, но я не могу найти, где я ошибаюсь, вот мой код, можете ли вы указать мне правильное направление вот этот код

var app = new Vue({
  el: '#app',
  data() {
    return {

      username: "",
      password: ""

    }
  },
  methods: {
    login() {
      console.log(this.username)
    },
  }

})

<div id="app">
  <div class="main">
    <div class="left">
      <h1>Login</h1>
      <p><i>To your Account</i></p>
      <form @submit.prevent="login">
        <input type="text" name="username" v-model="username" placeholder="Username" />
        <input type="password" name="password" v-model="password" placeholder="Password" />
        <input type="submit" value="LOG IN">

      </form>
    </div>
  </div>


</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Заранее спасибо