vue.js 表单验证和 ajax 提交答案

【问题标题】：vue.js form validation and ajax submitvue.js 表单验证和 ajax 提交
【发布时间】：2014-09-10 16:53:07
【问题描述】：

我正在尝试使用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，但它不显示控制台日志。

【问题讨论】：

现在有一个可用于 Vue 的 vue-validator 插件。它的工作原理很像 AngularJS。
谢谢你给我发链接
你见过vue-contextable吗？ Contextable.js 是为服务器端和客户端验证而构建的。
谢谢@xpepermint - 我得调查一下，但现在我不再在 Vue.js 上工作了 - 现在情况可能已经好很多了。

标签： javascript html ajax validation vue.js

【解决方案1】：

第一行在 'v-on' 周围有单引号，但不应该有：

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

这是JSFiddle with the working version

【讨论】：

如果你用这些项目创建一个本地 html 文件并运行它，你会看到当你选择其中一个时控制台将记录为 false，然后选择第二个，它会记录为 true 并同时记录此输出：“进行 ajax 调用” - 不幸的是，您的回答不能解决问题。