I'm encountering an issue where the same component content is being rendered despite having different components (Rendering problem).
I have a reusable modal component called modal.vue, so every time I create a new component, I call the modal component and inject new content into it.
The problem arises when I have two components (country.vue & city.vue) imported in my index.vue file.
Whenever I click on a button to load the city component, the country modal gets loaded instead, leading to a rendering problem (unable to re-render).
Could someone please explain the solution to this issue? Below is my code:
modal.vue (re-usable)
<template>
<div class="right-bar" :class="(size == null) ? 'right-bar-35' : size">
<simplebar class="h-100">
<div class="rightbar-title px-3 py-4">
<div class="row">
<div class="col-lg-10">
<h5 class="m-0">{{title}}</h5>
</div>
<div class="col-lg-2 text-right">
<span class="clickable" @click="hideRightSidebar"><i class="mdi mdi-close-thick"></i></span>
</div>
</div>
</div>
<div class="px-3 py-4">
<slot/>
</div>
<footer class="modal-footer">
<button type="button" class="btn btn-secondary" style="float:left;">Cancel</button>
<slot name="footer"/>
</footer>
</simplebar>
</div>
</template>
As you can see, I have a <slot/> in my component to inject new content each time.
This is my country.vue component (using the modal.vue component)
<template>
<div>
<button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
<modal title="countries" v-if="showModal">
i 'am the country modal
</modal>
</div>
</template>
<script>
import RightBar from "@/components/modal";
export default {
data() {
return {
showModal: false
}
},
components:{
modal,
},
methods: {
init: function(){
this.showModal= true;
}
}
}
</script>
This is my city.vue component (using the modal.vue component)
<template>
<div>
<button class="btn btn-sm btn-white" @click="init">Filter <i class="mdi mdi-filter"></i></button>
<modal title="cities" v-if="showModal">
i 'am the citymodal
</modal>
</div>
</template>
<script>
import RightBar from "@/components/modal";
export default {
data() {
return {
showModal: false
}
},
components:{
modal,
},
methods: {
init: function(){
this.showModal= true;
}
}
}
</script>
This is my index.vue (where I load city.vue and country.vue) as you can see both of my components have a button
<template>
<div>
<city></city>
<country></country>
</div>
</template>
<script>
import addContact from "./city.vue";
import filterContact from "./country.vue";
export default {
components:{city,country}
data(){
return {
}
}
}
</script>
Whenever I click on city, I encounter the country modal instead (rendering problem). How can I resolve this?