Вопрос:

Проверка формы vue.js и отправка ajax

javascript html ajax validation vue.js

7143 просмотра

1 ответ

1061 Репутация автора

Я пытаюсь использовать 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 для тестирования , но он не показывает журнал консоли.

Автор: nictrix Источник Размещён: 19.07.2014 06:54

Ответы (1)


0 плюса

2909 Репутация автора

Первая строка имеет одинарные кавычки вокруг v-on, когда их не должно быть:

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

Вот JSFiddle с рабочей версией

Автор: kwcto Размещён: 22.07.2014 02:27
Вопросы из категории :
32x32