I would like to validate my forms. At the moment I'm getting these errors:
[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>)
This is the source of the mail-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>
So I'm quite new to VueJs; as far as I understand formTemplates.countrycode.invalid is not defined? But: The validation itself works fine. Shouldn't it work if there is an error in the validation?
Any ideas how to prevent these errors in this case?
