如何从Vue.extend返回Value

Question

我得到了以下代码：

var GuestMenu = Vue.extend({
  props : ['username','password'],
  template: `
    <div id="auth">
        <form class="form-inline pull-right">
            <div class="form-group">
                <label class="sr-only" for="UserName">User name</label>
              <input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">
            </div>
            <div class="form-group">
              <label class="sr-only" for="Password">Password</label>
              <input type="password" v-model="password" class="form-control" id="Password" placeholder="Password">
            </div>
          <button type="submit" class="btn btn-default" v-on:click="sendLoginInfo()">Войти</button>
        </form>
    </div>`,
    data: function()
    {
      return
      {
       // How to return username
      }
    }
});

我想创建一个函数，从输入字段返回用户名并将其发送到服务器。我该如何做到这一点？创建像Auth这样的新Vue实例，并将这些数据传递给它，然后在其中将它们传递给服务器或其他什么？

Answer 1

您需要为正在提交的表单创建一个方法，该方法将向服务器发送值。在模板中，您可以添加

<form class="form-inline pull-right" v-on:submit.prevent="login">

提交表单时，它将自动调用e.preventDefault()，这样页面就不会重新加载，然后它将查找一个名为login的函数。因此，在Vue对象中，添加：

methods:{
    login: function(){
        //send form values to server
        // use ajax OR use this.$http if you are using the vue-resource extension
        this.$http.post('path/to/login', {
            username: this.username,
            password: this.password
        }).then(function(response){
            //handle response
        })
    }
}