Vue. js: 'v-if' в динамике c дочерний компонент выбрасывает не определенную ошибку - PullRequest
Новая
       53

Vue. js: 'v-if' в динамике c дочерний компонент выбрасывает не определенную ошибку

1 голос
/ 24 февраля 2020

У меня есть дочерний компонент, который я $ испускаю событие v-on: blur и условие v-if, если on: blur возвращает ошибку: 

                   <template>
                           <input type="text"
                           class="form-control"
                           id="input-username"
                           name="custid"
                           v-on:blur="$emit('hasValidCustomerId')"
                           v-model="custid"/>           
                        <div v-if="custidError"> Error! </div>
                  <template/>

И родительский компонент, который имеет показ слайдов дочерних компонентов .:

        <div id="password-form">
            <transition name: currentTransition>
                <component 
                       v-on:changeSlide="changeSlide" 
                       v-on:blur="hasValidCustomerId"  
                       :is="slides[currentSlide]">
                </component>
            </transition>
        </div>

И событие щелчка, и события размытия, которые я излучаю, кажутся нормальными. Но когда он достигает V-If, я получаю сообщение об ошибке 

 VM17881 vue.js:491 [Vue warn]: Property or method "custidError" is not defined on the instance but referenced during render.

found in

---> <AccountDetails>
       <PasswordFlow>
         <Root>

Мой javascript: 

//////// child component
    var accountDetails =
      {
        template: '#template',
        components: { },
        data: function () {     
         return {};          
      },                      
        computed: {},
        methods: {},
      };    
//////// parent component
      var passwordFlow =
        {
        template: '#template',
        components: {
            "login": login,
            "account-details": accountDetails,
            "otc-options": otcOptions
        },
        data: function () {     
          return {
              slides: ['login', 'account-details', 'otc-options'],
              currentSlide: 0, 
              currentTransition: ' '
              custid: '',
              custidError: false //throws error not defined
             };     
          },             

        computed: {},
        methods: {
              hasValidCustomerId: function () {
              if (this.custid !== "" && !validation_customerid.test(this.custid)) {
              this.custidError = true;
           }
        },
      };

И мой VUE экземпляр: 

   var vm = new Vue({
        el: "#login-main",
       data: {},
       components: {
           "passwordFlow": passwordFlow,
            },
       computed: {},
       mounted: function () { },
       methods: {}
   });

Ошибка говорит, что свойство в v-if "custidError" не определено. Однако это определено в родительском. Должен ли я испустить V-If заявление?

1 Ответ

1 голос
/ 24 февраля 2020

Вы должны передать свои реквизиты динамическому c компоненту следующим образом: 

<component 
           v-on:changeSlide="changeSlide" 
           v-on:blur="hasValidCustomerId"  
         :is="slides[currentSlide]">
          v-bind="{custidError:custidError}"
</component>

В дочернем компоненте определите custidError реквизиты: 

//////// child component
    var accountDetails =
      {
        template: '#template',
         props:['custidError'],
        components: { },
        data: function () {     
         return {};          
      },                      
        computed: {},
        methods: {},
      };
...