# Add an other element as property

# Why ?

Sometimes we will need to have an other element as children.

This is usefull for example if you want an image or a text displayed, but you still want the user to have all the edit experience of this element.

This is also a common pattern to initialize a dropzone content.

# Add an element on creation

See Development process to load a base section in dev mod. We will replace the title by a ww-text component.

# wwDefaultContent

First step is to add the default content value

wwDefaultContent: {
    title: wwLib.element({ type: 'ww-text' })
},

TIP

We use the special wwLib.element fonction to create an element. See here for all options available

# Use the value inside the template

<div class="my-section">
    <wwObject v-bind="content.title" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
        ea commodo consequat.
    </p>
</div>

TIP

Here we use the special object wwObject. See here for all options available

And it's done !

TIP

We don't have to put this property in the ww-config.json because we will never update it on the edit panel from the parent. It will have is own wwText panel interface

# Add an element dynamically

Sometimes, you will need to create an element after your component has been mounted.

Exemple: you have a toggle to indicate if an icon is present or not. You create the icon element only when this option is active.

You can use wwLib.createElement for that or wwLib.createElementFromTemplate, and the update event

export default {
    // [...]
    methods: {
        createIcon() {
            const icon = wwLib.createElement({ type: "ww-icon" })
            this.$emit('update', { icon })
        }
    }
    // [...]
}

WARNING

Element created this way but not save anywhere inside an element or a component content will be garbage collected and some point, and will not appear in the published website. If you use this method, please store the object in a content after.