支付宝赞助帐号:service@kuitao8.com 

vue.js更新表单

Created2016-01-26   Views 4880    Author 懒人程序
  1. var app = new Vue({ 
  2.     el: '#form'
  3.     filters: { 
  4.         selectValidator: function (val) { 
  5.             this.validation.selected_id = !! val 
  6.             return val 
  7.         } 
  8.     }, 
  9.     data: { 
  10.         form: { 
  11.             selected_id: '' 
  12.         }, 
  13.         validation: { 
  14.             selected_id: false 
  15.         } 
  16.     }, 
  17.     methods: { 
  18.         updateForm: function (e) { 
  19.             console.log(this.validation.selected_id) 
  20.             if (this.validation.selected_id) { 
  21.                 console.log("make ajax call"
  22.             } 
  23.         } 
  24.     } 
  25. }) 

html
 

  1. <div id='form' v-on="change:updateForm"> 
  2.     <form> 
  3.         <select id="selects" name="selected_id" v-model='form.selected_id | selectValidator'> 
  4.             <option value="">Please choose one 
  5.                 <option value='1'>Select 1</option> 
  6.                 <option value='2'>Select 2</option> 
  7.         </select> 
  8.     </form> 
  9.     <br> 
  10.     <div v-show="!validation.selected_id">Select cannot be blank</div> 
  11.     <div v-show="validation.selected_id">{{form.selected_id}}</div> 
  12.     <div v-show="validation.selected_id">{{validation.selected_id}}</div> 
  13. </div> 

 

上一篇: jquery显示隐藏密码文本框
下一篇: jquery 获取单选框radio的值
支持键盘 ← →

邮件订阅

订阅我们的精彩内容