javascript - VueJS : Prevent errors on validation

Question

我想验证我的表格。目前我收到这些错误:

[Vue warn]: You are setting a non-existent path "formTemplates" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance. (found in component: <mailing-template>)
[Error] [Vue warn]: Error when evaluating expression "formTemplates.countrycode.invalid": TypeError: undefined is not an object (evaluating 'scope.formTemplates.countrycode') (found in component: <mailing-template>)

这是邮件模板的来源:

<!--suppress ALL -->
<template>
    <div class = "uk-form-row">
        <span class = "uk-form-label" >{{ data.type | capitalize | trans }}</span >
        <div class = "uk-form-controls uk-form-controls-text">
            <a href = "#{{ data.type }}" data-uk-modal class = "uk-placeholder uk-text-center uk-display-block uk-margin-remove">
                <p class = "uk-text-muted uk-margin-small-top">Text...</p></a>
        </div>
    </div>
    <div id = "{{ data.type }}" class = "uk-modal">
        <div class = "uk-modal-dialog uk-modal-dialog-large">
            <ul class = "uk-tab" v-el:tab>
                <li><a>{{ 'New Translation' | trans }}</a></li>
                <li><a>{{ 'Edit Translations' | trans }}</a></li>

            </ul>
            <div class = "uk-switcher uk-margin" v-el:content >
                <div >
                    <form class = "uk-form uk-form-stacked" v-validator = "formTemplates" @submit.prevent = "add | valid" >
                        <div class = "uk-form-row" >
                            <div class = "uk-form-label" >
                                <select class = "uk-form-medium" id = "countrycode" name = "countrycode" v-model = "newTemplate.countrycode" v-validate:required >
                                    <option v-for = "country in countries" value = "{{ $key }}" :disabled = "countryMatch($key)" >
                                        {{country}}
                                    </option >
                                </select >
                                <p class = "uk-form-help-block uk-text-danger" v-show = "formTemplates.countrycode.invalid" >
                                    {{
                                    'Invalid value.' | trans }}</p >
                            </div >
                            <div class = "uk-form-controls uk-form-controls-text" >
                                <v-editor id = "content" name = "content" :value.sync = "newTemplate.content" :options = "{markdown : 'true', height: 250}" ></v-editor >
                                <p class = "uk-form-help-block uk-text-danger" v-show = "formTemplates.content.invalid">
                                    {{
                                    'Invalid value.' | trans }}</p>
                            </div>
                            <div class = "uk-form-controls uk-form-controls-text">
                                <span class = "uk-align-right">
                                        <button class = "uk-button" @click.prevent = "add | valid">
                                            {{ 'Add' | trans }}
                                        </button>
                                    </span>
                            </div>
                        </div>
                    </form>
                </div>
                <div>
                    <div class = "uk-alert" v-if = "!translations.length" >
                        {{ 'You can add your first translation using the input-field. Go ahead!' | trans }}
                    </div >
                    <div class = "uk-form-row" v-for = "translation in translations" >
                        <span class = "uk-form-label" >{{ translation.countrycode | trans }}</span >
                        <div class = "uk-form-controls uk-form-controls-text" >
                            <v-editor id = "{{ translation.countrycode }}" name = "{{ translation.countrycode}}" :value.sync = "translation.content" :options = "{markdown : 'true', height: 250}" ></v-editor >
                        </div >
                        <div class = "uk-form-controls uk-form-controls-text" >
                            <span class = "uk-align-right" >
                                <button @click = "remove(translation)" class = "uk-button uk-button-danger" >
                                    <i class = "uk-icon-remove" ></i >
                                </button >
                            </span >
                        </div >

                    </div >

                </div>
            </div>
            <div class = "uk-form-row uk-margin-top" >
                <div class = "uk-form-label" >
                    <button class = "uk-button uk-button-primary uk-modal-close" >{{ 'Save' | trans }}</button >
                </div >
            </div >
        </div>
    </div>
</template>

<script>

    module.exports = {

        section: {
            label: 'Mailing-Template',
            priority: 100
        },

        props: ['data', 'countries'],

        data: function () {
            return {
                translations: this.data.translations,
                newTemplate: {
                    countrycode: '',
                    country: ''
                }
            }
        },

        ready: function () {
            this.tab = UIkit.tab(this.$els.tab, {connect: this.$els.content});
        },

        methods: {
            add: function add(e) {

                e.preventDefault();
                if (!this.newTemplate || !this.newTemplate.countrycode || !this.newTemplate.content) return;

                this.translations.push({
                    countrycode: this.newTemplate.countrycode,
                    content: this.newTemplate.content
                });

                this.newTemplate = {
                    countrycode: '',
                    content: ''
                };
            },

            remove: function (template) {
                this.translations.$remove(template);
            },

            countryMatch: function (code) {
                return this.translations.filter(function (template) {
                            return template.countrycode == code;
                        }).length > 0;
            }

        }
    };

    window.Ispsettings.components['mailing-template'] = module.exports;
</script>

所以我对 VueJs 还很陌生；据我了解 formTemplates.countrycode.invalid 未定义？但是:验证本身运行良好。如果验证出错不是应该有效吗？

在这种情况下有什么想法可以防止这些错误吗？

Answer 1

确保您使用的是 Vue 1.0.19 或更高版本。该版本已解决此问题。您还需要 vue-validator 2.0 或更高版本。基本上，自该更新以来，Vue 会等待验证器创建，然后再评估内部表达式。

这些警告只是警告，因此不会影响您的应用程序。