Need Help in Rendering Dynamic Component in Vue js

Question

hi there i have the following situation . I have parent component (Health Profile) that lists child subcomponents with add button on each . I want to make the application such a way that when user clicks on add button only form to that specific component opens up and rest are closed and vice versa . I m unable to make use of v-bind:is because the button is in the subcomponent and it emits the data to parent component. Any help will be appreciated .attached the screenshot Health Profile Component with each subcomponent having button that fires emmit data type

Answer 1

Please next time provide a code snippet to better understand your code

You can use an event bus to propagate the button click throughout the project.

// event-bus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

Then import this in your component

// component-a.js
import Vue from 'vue';
import EventBus from './event-bus';
Vue.component('component-a', {
...
methods: {
  emitMethod () {
    EventBus.$emit('EVENT_NAME', payLoad);
  }
}
});

Check out this article