vue组件开发之用户无限添加自定义填写表单的方法

<template>
 <div class="checkbox">
 <div class="input">
 <p v-for="item in inputs">
 <span>自定义字段：</span>
 <input type="text" v-model="item.val">
 </p>
 <button @click="addInput()">添加字段</button>
 <button @click="sub()">保存提交</button>
 </div>
 <h1>提交的信息： {{submsg}}</h1>
 </div>
</template>
<script>
 export default {
 name: 'checkbox',
 data (){
 return {
 inputs:[],
 submsg:''
 }
 },
 methods: {
 addInput (){
 var obj = {};
 obj.id = this.inputs.length;
 obj.val = "";
 this.inputs.push(obj);
 },
 sub (){
 this.submsg = this.inputs;
 },

 }
 }
</script>
<style scoped>
 *{margin:0 auto;padding:0;font-family:"微软雅黑";}
 .checkbox{
 width:800px;
 margin:50px auto;
 }
 .input p{
 padding:10px 0;
 }
</style>