vue.js 表单验证和 ajax 提交

我正在尝试使用 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 为假,而不是打印出来时的真实情况: true

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

stack overflow vue.js form validation and ajax submit
原文答案

答案:

作者头像

当不应该有任何时,第一行在 'v-on' 周围有单引号:

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

这是一个 JSFiddle with the working version