vue_表单实例

Posted 2020-08-29 木子炜培先生

<div id="app">
    <form @submit.prevent="submit">
        <div class="field">
            姓名：<input type="text" v-model="user.name">
        </div>
        
        <div class="field">
            性別：
            <label>
                <input type="radio" value="男" v-model="user.gender"> 男
            </label>
            <label>
                <input type="radio" value="女" v-model="user.gender"> 女
            </label>
        </div>
        
        <input type="submit" value="提交">
    </form>
</div>

<script>

   new Vue({

       el: ‘#app‘,
       data: {
           user: {
               name: ‘‘,
               gender: ‘‘
           }
       },
       methods: {
           submit: function() {
               var formData = JSON.stringify(this.user); // 这里才是你的表单数据

               this.$http.post(‘/path/to‘, formData).then((response) => {
                   // success callback
               }, (response) => {
                   // error callback
               });
           }
       }

   })
</script>