Dynamic component id issue solved

This commit is contained in:
Cüneyt Şentürk 2020-08-22 16:07:36 +03:00
parent 95f5c8cd73
commit 7ef096dab9
7 changed files with 14 additions and 9 deletions

View File

@ -67,7 +67,7 @@ const app = new Vue({
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>', template : '<div id="dynamic-delete-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
mixins: [ mixins: [
Global Global

View File

@ -22,6 +22,7 @@
</div> </div>
<div class="modal-body pb-0" v-else> <div class="modal-body pb-0" v-else>
<form id="form-create" method="POST" action="#"/> <form id="form-create" method="POST" action="#"/>
<component v-bind:is="component"></component> <component v-bind:is="component"></component>
</div> </div>
</slot> </slot>
@ -143,10 +144,12 @@ export default {
}, },
mounted() { mounted() {
let form_prefix = this._uid;
if (this.is_component) { if (this.is_component) {
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template : '<div id="modal-add-new-form">' + this.message + '</div>', template : '<div id="modal-add-new-form-' + form_prefix + '">' + this.message + '</div>',
components: { components: {
AkauntingRadioGroup, AkauntingRadioGroup,
@ -163,7 +166,7 @@ export default {
}, },
mounted() { mounted() {
let form_id = document.getElementById('modal-add-new-form').children[0].id; let form_id = document.getElementById('modal-add-new-form-' + form_prefix).children[0].id;
this.form = new Form(form_id); this.form = new Form(form_id);
}, },

View File

@ -141,7 +141,7 @@ export default {
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>', template : '<div id="dynamic-delete-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
components: { components: {
AkauntingModal, AkauntingModal,
@ -347,7 +347,7 @@ export default {
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>', template : '<div id="dynamic-delete-file-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
components: { components: {
AkauntingModal, AkauntingModal,

View File

@ -338,7 +338,7 @@ const app = new Vue({
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>', template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
mixins: [ mixins: [
Global Global

View File

@ -339,7 +339,7 @@ const app = new Vue({
this.component = Vue.component('add-new-component', (resolve, reject) => { this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({ resolve({
template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>', template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
mixins: [ mixins: [
Global Global

View File

@ -7,7 +7,8 @@
@stack('content_content_end') @stack('content_content_end')
<notifications></notifications> <notifications></notifications>
<form id="form-create" method="POST" action="#"/> <form id="form-dynamic-component" method="POST" action="#"></form>
<component v-bind:is="component"></component> <component v-bind:is="component"></component>
</div> </div>
@stack('content_end') @stack('content_end')

View File

@ -7,7 +7,8 @@
@stack('content_content_end') @stack('content_content_end')
<notifications></notifications> <notifications></notifications>
<form id="form-create" method="POST" action="#"/> <form id="form-dynamic-component" method="POST" action="#"></form>
<component v-bind:is="component"></component> <component v-bind:is="component"></component>
</div> </div>
@stack('content_end') @stack('content_end')