I'm trying to use vue.js to do form validation and when the element is valid to submit it via ajax. But I can't get past the validation part.
My html:
<div id='form' 'v-on'="change:updateForm">
<form>
<select id="selects" name="selected_id" v-model='form.selected_id | selectValidator'>
<option value="">Please choose one
<option value='1'>Select 1</option>
<option value='2'>Select 2</option>
</select>
</form>
<br>
<div v-show="!validation.selected_id">Select cannot be blank</div>
<div v-show="validation.selected_id">{{form.selected_id}}</div>
<div v-show="validation.selected_id">{{validation.selected_id}}</div>
My javascript:
var app = new Vue({
el: '#form',
filters: {
selectValidator: function (val) {
this.validation.selected_id = !! val
return val
}
},
data: {
form: {
selected_id: ''
},
validation: {
selected_id: false
}
},
methods: {
updateForm: function (e) {
console.log(this.validation.selected_id)
if (this.validation.selected_id) {
console.log("make ajax call")
}
}
}
})
When looking into the console I see this.validation.selected_id
as false instead of what it really is when it's printed out: true
Here's a jsfiddle for testing , but it doesn't show the console log.
The first line has single quotes around 'v-on' when there shouldn't be any:
<div id='form' v-on="change:updateForm">
Here's a JSFiddle with the working version
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.