如何从 Vue.extend 中 return 取值？

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

});

我想创建一个函数，returns 来自输入字段的用户名并将其发送到服务器。我如何实现这一目标？创建新的 Vue 实例，如 Auth 并将此数据传递给它，然后将它们传递给服务器或什么？

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 中 return 取值？

How to return Value from Vue.extend?

vue.js