How can I create a new component on firing any event using Vue.js?

Question

Say, I am showing some posts that I got from an ajax response. Now I want to add the option to edit any particular post on clicking some button. I guess, I could do it using v-show, where I will attach a form component or something with every single post and when the user clicks the edit button I will hide the post div and show the form with post's body and title and again on clicking save I could hide the form, send a request to the server to update the post then show it again.

Now my question is, is it doable without attaching and hiding anything in the first place? Because, how many times will I get users wanting to edit their posts? I want to call a function or something else with the post on some button click which will return a component with one or two text fields that have post data as their value.

Is it even possible using Vue?

If I understand correctly, you want to save on the additional html which would be present in the DOM per comment-component if you add edit-comment-component? also without using v-show. is v-if off the list too? because that would do the trick. — Amresh Venugopal
I do not have any issue with v-show or v-if, I just do not want to attach and then hide that edit-comment-component. On some event, I do want to hide the post but load edit-comment-componentrather making it visible by changing some boolean variable. — Foolish and Hungry
I am just learning JS and JS Frameworks. In fact, Vue is my first JS framework that I started last week. So, things I am asking for might not make any senses. If that's the case, I am extremely sorry for my ignorance. — Foolish and Hungry
The things that come to my mind on that are: how would you style that? The v-if v-show would help you in maintaining the edit-comment-component in the document flow. Dynamically creating a component can work out too, but now that you say 'load' do you mean async loading the component? — Amresh Venugopal
I do not have much knowledge about 'async' loading. I think what I want is somewhat similar to Jquery's append/html functions functionality. Instead of an HTML tag, I just want a Vue component. — Foolish and Hungry

Amresh Venugopal Amresh Venugopal · Accepted Answer · 2017-03-27T20:35:35

You can append a component to another this way:

// the parent component
const CommentComponent = new Vue({
  template: '<div>...</div>'
})

// the child component
const EditCommentComponent = Vue.extend({
  template: '<div> child </div>'
})

CommentComponent.$addChild({}, EditCommentComponent).$mount().$appendTo(CommentComponent.$el)

If you wish to do this within the parent component, you can do this by replacing a with this.

- Source

Although as I have inferred from the comments, this would not be the most appropriate way to handle your case.

How can I create a new component on firing any event using Vue.js?

1 Answers