v-if свойство не обновляется в VUE. js

Question

1Я пытаюсь проверить текстовое поле. У меня есть дочерний компонент, который имеет событие размытия. И оператор V-If, чтобы показать ошибку, если истина. На размытие срабатывает нормально, и я шаг за шагом кода. Кажется, он делает то, что мне нужно, однако свойство error родительского компонента / оператора v-if не обновляется (показывает ошибку). Вот мой код:

//Child component
    <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/>
//Parent Component
 <div id="password-form">
            <transition name: currentTransition>
                <component 
                       v-on:changeSlide="changeSlide" 
                        v-on:blur="$emit('hasValidCustomerId')" 
                       :is="slides[currentSlide]">
                </component>
            </transition>
        </div>

My javascript

// Child Component
    var accountDetails =
      {
        template: '#template',
        components: { },
        data: function () {     
         return {
                custid: '',
               custidError: false,
               currentSlide: 0,
                currentTransition: ''
     };          
      },                      
        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 
             };     
          },             

        computed: {},
        methods: {
             hasValidCustomerId: function () {
                if (this.custid === " ")
                    this.custidError = true;        ///This gets set to true
                  console.log(this.custidError);    ///this logs false ??               
            },
      };

VUE экземпляр

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

Answer 1

в дочернем компоненте, измените custidError с данных на реквизиты

// Child Component
    var accountDetails =
      {
        template: '#template',
        components: { },
        props: {
         custidError: {
          type: Boolean,
          default: false
        }
       },
        data: function () {     
         return {
                custid: '',
               currentSlide: 0,
                currentTransition: ''
     };          
      },                      
        computed: {},
        methods: {},
      };    

, затем в родительском, передайте его компоненту

<component :custidError="custidError"
                       v-on:changeSlide="changeSlide" 
                        v-on:blur="$emit('hasValidCustomerId')" 
                       :is="slides[currentSlide]">
                </component>