VueJS: Предотвращение ошибок при проверке

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-validator2.0 или выше. В принципе, начиная с этого обновления, Vue ожидает, что валидатор будет создан, прежде чем оценивать выражения внутри.

Эти предупреждения являются только предупреждениями, поэтому они не будут влиять на ваше приложение.