javascript - vue.js 表单验证和ajax提交

Question

我正在尝试使用 vue.js进行表单验证，并在元素有效时通过 ajax 提交。但我无法通过验证部分。

我的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>

我的 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")
        }
    }
}

})

当查看控制台时，我看到 this.validation.selected_id 为 false，而不是打印出来时的实际情况:true

这是一个jsfiddle for testing ，但它不显示控制台日志。

Answer 1

第一行在 'v-on' 周围有单引号，而本不应该有:

<div id='form' v-on="change:updateForm">

这是一个JSFiddle with the working version