Vue.js : 'v-if' in dynamic child component throws not defined error

Question

I have a child component that I am $emiting a v-on:blur event and a v-if condition if on:blur returns an error:

                   <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/>

And a Parent Component which has a slide show of child components.:

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

Both click event and the on blur events I am emitting seem fine. But when it hits the v-if, I get an error

 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>

My 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;
           }
        },
      };

And my VUE instance:

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

The error is saying the property in the v-if "custidError " is undefined. However it is defined in the parent. Am I supposed to emit the v-if statement?

Boussadjra Brahim · Accepted Answer · 2020-02-23 22:53:38Z

1

You should pass your props to the dynamic component as follows :

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

In child component define the custidError props:

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

edited Feb 23, 2020 at 22:53

answered Feb 23, 2020 at 22:46

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EB. Over a year ago

I added the property to the child component and the v-bind to the if statement. the error went away. thank you!

Collectives™ on Stack Overflow

Vue.js : 'v-if' in dynamic child component throws not defined error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related