Base Vue

基礎Vue引入

by tomoeba

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<div id="main">
    <form @submit.prevent="submit">
        姓名
        <div class="field">
            <input name="name" type="text">
        </div>
        性別
        <div class="field">
            男<input name="gender" type="radio" value="male">
            女<input name="gender" type="radio" value="female">
        </div>
        <input type="submit" value="送出">
    </form>
</div>

CSS

.field {
    display: block;
    padding: 15px;
}

JavaScript

new Vue({

	el: '#main',
    methods: {
    	submit: function(event) {
        	// FormData支援把 Form 元素丟進去
        	var formData = new FormData(event.target)
            
            for(var pair of formData.entries()) {
               console.log(pair[0]+ ', '+ pair[1]); 
            }
            
            /*
            this.$http.post('/path/to', formData, function (data, status, request) {
				// Success
            }).error(function (data, status, request) {
 				// Error
            });
			*/
        }
    }

})