oliverbusk's avatar

Dynamically add/remove Vue component

Hi

I have a Vue component, that can be used to crop an image. I want to be able to allow my users to crop the same images in multiple areas.

Consider below component:

<div id="editor">
     <VueDragResize :w="8" :h="1280" v-on:resizing="resize"></VueDragResize>
</div>

I want to be able to add new <VueDragResize></VueDragResize> components dynamically:

<a @click="addComponent">Add Component</a>

<a @click="removeComponent">Remove Component</a>

So whenever I click Add Component link, a new <VueDragResize></VueDragResize> will be created and inserted into <div id="editor"></div>. Same when I click Remove Component, the specific component will be removed from the div.

I've been searching through SO and Vues forums, but I can't seem to find any examples of how to do this?

Can anyone guide me in the right direction on how to do this?

0 likes
2 replies

Please or to participate in this conversation.