我正在尝试使用 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 ，但它不显示控制台日志。
当不应该有任何时，第一行在 'v-on' 周围有单引号：
这是一个 JSFiddle with the working version