CODEWITHSUNDEEP
vue.jsvuejs2
niko craft
niko craft

Reputation: 2977

How to initialise components when using dynamic components

I have this code:

    <div id="blocks">
        <component v-for="block in blockList"
            :is="block.component"
            :id="block.uniqueId"
            :init-show-header="showHeaders"
            v-model="block.model"
            v-on:content-block-remove="removeBlock"
            :key="block.uniqueId">
        </component>
    </div>

        addBlock(name) {
            let block = new Object()
            block.model = new Object()
            block.uniqueId = name + '-block-' + this.blockCount
            block.component = name + '-block'
            this.blockList.push(block)
            this.blockCount = this.blockCount + 1
        },

    <div id="buttons">
        <button v-on:click="addBlock('taxonomy')" type="button" name="button" class="btn btn-primary btn-sm">Add Taxonomy</button>
        <button v-on:click="addBlock('text-input')" type="button" name="button" class="btn btn-primary btn-sm">Add Text Input</button>
        <button v-on:click="addBlock('header')" type="button" name="button" class="btn btn-primary btn-sm">Add Header</button>
        <!-- <button v-on:click="addBlock('text')" type="button" name="button" class="btn btn-primary btn-sm">Add Text</button> -->

I have different types of components that have different kind of options stored in data object. I plan to save these options to the database upon saving the page where they are added and their settings adjusted. Each component type, its order on the page and components options are going to be saved in the database.

My question is, how do I initialise this page again after refreshing it and getting all the components and their options from the database? How would I get the options to each component when adding them in a loop on a mount event of the parent component where I load all components saved in the database and want to render them with the correct options?

What are my options?

Upvotes: 0

Views: 57

Answers (1)

Greg C.
Greg C.

Reputation: 81

I suggest just use bare v-bind with an object of attributes for this. Look: https://v2.vuejs.org/v2/api/#v-bind

Thats what I mean. Let's say you have this.someTestParams = {param1: 'test string', param2: true, param3: false} in your component.

So you just need to write: <my-child-component v-bind="someTestParams" />

Instead of: <my-child-component v-bind:param1="'test string'" v-bind:param2="true" v-bind:param3="false" />

Upvotes: 1

Related Questions