vue.js 表单验证和 ajax 提交

Question

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.

Answer 1

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