Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I pass propsData to dynamic component in template

See original GitHub issue

when I render form.jade from columns.json , I try to pass propsData(multi props) to component , but It seems unsupported. Is there a better way to do this?

json

[
  {"title": "A", "name":"a",  "component": "ui-dropdown" , "propsData": {"options": [], "on":"hover" }},
  {"title": "B", "name":"b",  "component": "ui-dropdown" , "propsData": {"options": [] , "on":"click"}},
]

template :

.ui.segment.form.bottom.attached
    .field(v-for="column in columns")
        label {{column.title}}
        component(:is="column.component",
                           :propsData="column.propsData", 
                           :value.sync="editor[column.name]")

Of course , there is a way to pass props one by one , but it seems not so good.

.ui.segment.form.bottom.attached
    .field(v-for="column in columns")
        label {{column.title}}
        component(:is="column.component", 
                           :options="column.propsData.options", 
                           :on="column.propsData.on", 
                            :value.sync="editor[column.name]")

Issue Analytics

State:
Created 7 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

9reactions

terrydaicommented, Jul 19, 2016

[UPDATE] The directive is not that ok in some situation , I have wrote a better solution component-proxy

import _ from 'lodash'
import Vue from 'vue'


export default {
  props: ['name', 'props', 'value'],
  template:  '',
  created(){
    let props = []
    if(this.props ){
      // apply properties to component data
      _.forOwn(this.props, (value, key)=>{
        // console.debug( key,  this[key])
        props.push(`:${_.kebabCase(key)}="props['${key}']"`)
      })
    }

    // console.debug('component proxy', props.join(' '))
    this.$options.template = `<component :is="name" ${props.join(' ')} :value.sync="value"></component>`
  },
}

@fnlctrl , tks for your reply. I have wrote a directive to do this and really appreciate vue would add this feature in the future:

directives: {
    props(props){
      let comp = this.vm.$children[this.vm.$children.length - 1];
      if(props && comp){
        // apply properties to component data
        _.forOwn(props, (value, key)=>{
          comp[key] = value
        })
      }
    }
  }

template:

.ui.segment.form.bottom.attached
    .field(v-for="column in columns")
        label {{column.title}}
        component(:is="column.component",
                           v-props="column.propsData", 
                           :value.sync="editor[column.name]")

1reaction

iagafonovcommented, Jul 7, 2016

I have the same problem! @terrydai - this is good solution. I try it now. For now I manually create new instances and mount them in particular element like this new MyComponent({el: '#id', propsData: {...}})

Top Results From Across the Web

Passing props dynamically to dynamic component in VueJS

To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and ......

Passing props dynamically to dynamic component in VueJS ...

To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and...

Pass props to dynamic Vue components - Jordan Kicklighter

This is usually done by specifying the component that will be rendered and adding a v-for to its tag in the template.

How to use props to pass data to child components in Vue.js

You can use the root component (App.vue) as the parent component and store the data and then register props to access this data...

Props | Vue.js

Technically, you can also use camelCase when passing props to a child component (except in DOM templates). However, the convention is using kebab-case...