最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。
代码如下：
<template>
<div class="index">
<!--header-bar></header-bar-->
<div style="margin:20px;">
<div class="item">
<p>住户名称:</p>
<p>
<input type="text" value="username" v-model="formStatus.username" placeholder="输入名称">
</p>
</div>
<div class="item">
<p>住户类型:</p>
<p>
<label v-for="(item, index) in zhuhuType">
<span>{{item.name}}</span>
<input type="radio" name = "zhuhutype" :value="item.id" :checked="item.isChecked" @click="changeZh(index)" v-model="formStatus.zhuhuType">
</label>
</p>
</div>
<div class="item">
<p>设备名称:</p>
<p>
<label v-for="(item, index) in shebeiType">
<span>{{item.name}}</span>
<input type="checkbox" :value="item.id" :checked="item.isChecked" @click="changeSb(index)" v-model="formStatus.shebeiType">
</label>
</p>
</div>
<div class="item">
<p>住户大小:</p>
<p>
<select v-model="formStatus.zhuhudaxiao">
<option value="0">请选择</option>
<option v-for="option in zhuhudaxiao" v-model="zhuhudaxiao" :id = "option.id" :value="option.value" >{{option.name}}</option>
</select>
</p>
</div>
<div class="item">
<p>住户留言:</p>
<p>
<textarea value="userword" v-model="formStatus.userword"></textarea>
</p>
</div> </div>
<p style="margin:20px 0;"><button @click="save">点击保存</button></p>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios';
import ElementUI from 'element-ui'
import URL from '../utils/Tools/URL.js'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
import headerBar from '../modules/headerBar.vue';
export default {
name: 'index',
data (){
return {
zhuhuType: [],
shebeiType: [],
zhuhudaxiao: [],
//绑定改变后的表单值用于提交
formStatus: {
username: "",
zhuhuType: 43,
shebeiType: [52, 23],
zhuhudaxiao: "",
userword: ""
}
}
},
components: { headerBar },
methods: {
getPage (currentPage){
console.log(currentPage);
// this.$http.get("http://192.168.1.200/test.php").then(res=>{
