006 - VUE之form表单设计攻略

<div id="app">  
  <ul>  
    <li v-for="(item,index) in list">  
      <input type="text" v-model="item.info.name"/>  
      <p>{{item.info.name}}</p>  

      <p>------------------------------------------------{{form.list[index].selected}}</p>    
      <select v-model="form.list[index].selected">    
        <option disabled value="">请选择</option>    
        <option>A</option>    
        <option>B</option>    
        <option>C</option>    
      </select>    
    </li>  
  </ul>  
  <button @click="add">add</button>  
</div>  

new Vue({  
  el: '#app',  
  data: {  
    //列表  
    list: [],
    form: {
      //list: [{selected:'B'}]
      list: []
    }
  },  
  methods: {  
    //添加多条数据  
    add() {    
      this.list.push(    
        {    
          id: 1,     
          info: {    
            name: 'kuoaho',    
            selected: 'A'    
          }    
        }    
      )
      this.form.list.push({selected:'B'})
    }    
  },  
  //监听list数据变化  
  watch: {  
    list:{  
      deep: true, //深度监听  
      handler: function (newVal,oldVal) {  
        console.log(1111)  
      }  
    }  
  }  
})  

form表单提交的时候只需要重新组合form中的数据即可