kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

Multiple validators cause issues #185

Closed nblackburn closed 8 years ago

nblackburn commented 8 years ago

Just updated to version 2.0.0 and noticed if you have multiple validators on the same page, it seems to cause the following issues...

    <modal v-ref:createModal title="Create project">
        <validator name="createForm">
            <form class="uk-form uk-form-stacked" @submit.prevent="createProject">
                <div class="uk-form-row">
                    <label class="uk-form-label" for="createName">Name</label>
                    <div class="uk-form-controls">
                        <input class="uk-width-1-1" type="text" v-model="createName" v-validate:createName="{required: true}">
                    </div>
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label" for="createDescription">Description</label>
                    <div class="uk-form-controls">
                        <textarea class="uk-width-1-1" v-model="createDescription" v-validate:createDescription="{required: true}"></textarea>
                    </div>
                </div>
                <div class="uk-form-row">
                    <button class="uk-button uk-button-primary" type="submit" :disabled="$createForm.invalid">Create</button>
                </div>
            </form>
        </validator>
    </modal>
    <modal v-ref:editModal title="Edit project">
        <validator name="editForm">
            <form class="uk-form uk-form-stacked" @submit.prevent="updateProject">
                <div class="uk-form-row">
                    <label class="uk-form-label" for="editName">Name</label>
                    <div class="uk-form-controls">
                        <input class="uk-width-1-1" type="text" v-model="editName" :value="project.name" v-validate:editName="{required: true}">
                    </div>
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label" for="editDescription">Description</label>
                    <div class="uk-form-controls">
                        <textarea class="uk-width-1-1" v-model="editDescription" :value="project.description" v-validate:editDescription="{required: true}"></textarea>
                    </div>
                </div>
                <div class="uk-form-row">
                    <button class="uk-button uk-button-primary" type="submit" :disabled="$editForm.invalid">Save</button>
                </div>
            </form>
        </validator>
    </modal>

modal.vue

nblackburn commented 8 years ago

Seems as though it could be related to #177.

kazupon commented 8 years ago

@nblackburn Yes, I'm fixing now.

nblackburn commented 8 years ago

@kazupon Great, thanks for the prompt response.