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

如何从Vue.extend返回值？

1 个答案: