Register Component during runtime

[adifaidz]

I've created a root model and registered my components, but now I want to add a component during runtime. Is it possible? My runtime component is not a fixed one, thats why I want to add it during runtime. Please help anyone

Currently my component looks like this and I'm using vue with laravel

var selectRegion = Vue.component('select-region',{
      template:
      '<vue-select v-model="currentRegion" :options="regions" placeholder="Select a region" label="RegionName" track-by="code" :close-on-select="true" :searchable="true" :allow-empty="false" @select="onSelect"></vue-select>',
      data(){
        return{
          regions: {!! $regions !!},
          currentRegion: {!! $state->region!!}
        }
      },
      methods: {
        onSelect: function(e){
          $('#region_id').val(this.currentRegion.RegionNo);
        }
      }
    });

[thkdog]

If your component props is fixed, you can use <component /> component, which is an internal component. Or if your props is not fixed, you may create your own component, which accecpt ComponentCtor and props as properties, something like above:

'component-proxy': {
        props: ['item', 'component'],
        functional: true,
        render: function (createElement, context) {
          return createElement(this.component, {
            props: context.props.item
          });
        },
      }

Hope it would helps.

[adifaidz]

Thanks so much for your response. I didn't catch what you meant by this

'component-proxy': {
props: ['item', 'component'],
functional: true,
render: function (createElement, context) {
return createElement(this.component, {
props: context.props.item
});
},
}

But, I googled for ComponentCtor and ended up with this solution

var SelectRegion = Vue.extend({
  template:
  '<div>'+
    '<vue-select v-model="currentRegion" placeholder="Select a region" :options="regions" label="RegionName" '+
    'track-by="X1" :close-on-select="true" :searchable="true" :allow-empty="false"></vue-select>'+
    '<input type="hidden" id="region_id" name="region_id" v-model="currentRegion.RegionNo">'+
  '</div>',
  data(){
    return{
      regions: {!! $regions or '[]' !!},
      currentRegion: {!! $district->region or '{}'!!},
    }
  }
});

var selecComp= new SelectRegion({
}).$mount('#select-region');

Is this what you meant? Also, is this an okay approach towards this problem?

[thkdog]

Uhmmm.. I reviewed your question, and I'm little get confused.

What you said 'your component is not a fixed one', what that means? You may add different component during runtime? or add the same component? for once or several times? are the props keys stay the same?

[adifaidz]

What I meant by 'my component is not fixed' is that, the some of the props I may not use in some cases. I didnt want to create a wrapper for something I will only be using for certain cases. Thus I came to conclusion that I may need to create an inline component and call it in runtime.

The <vue-select/> component is from a package I'm using and it's only used in pages with form that uses a select input. Currently my root vm is a page wrapper. But I need a specific binding of v-model, data and methods for me to use the <vue-select/>. I didn't want to set the datas and methods to the root vm.

So I wanted to create a new model but I didnt know. Haha I'm stupid punch me

Then I found an example in a thread while googling for ComponentCtor Here's the link to that thread

Thats how I came to my solution. Sorry for my english. It's not my first language and Im not really good at explaining

[thkdog]

ComponentCtor is just a name of a component definition(Component Constructor), aka a normal .vue component, I casually named it.

The propsData is one approach to make it programmatically, but the mount process is not very vue-style. Pure DOM manipulation is not recommended.

You may get an insight into Render Function. It's one way as you mentioned: A Wrapper Component, but more elegant. You may review the component-proxy to see how it works.

[adifaidz]

From what you said just now, I think I understood a bit about your 1st reply . Will look into the render method