Passing props dynamically to dynamic component in VueJS

Passing props dynamically to dynamic component in VueJS

Asked on November 22, 2018 in vue.js.
Add Comment


  • 1 Answer(s)

        To transfer props dynamically, add v-bind command into dynamic element and transfer an item holding prop name and value.

    Now, dynamic element will appear as

    <component :is="currentComponent" v-bind="currentProperties"></component>
    

    In vue case,  currentProperties will be altered based on present element.

    data: function () {
      return {
        currentComponent: 'myComponent',
      }
    },
    computed: {
      currentProperties: function() {
        if (this.currentComponent === 'myComponent') {
          return { foo: 'bar' }
        }
      }
    }  
    

    While currentComponent is myComponent, it has foo attribute that is equivalent to ‘bar’. If not, no attributes would not be transferred.

    Answered on November 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.