I am trying to launch a modal window, much like a normal alert()
I am using bootstrap-vue BModal
How to generate Modal class from code and launch it
or, add modal in the root app.vue and call it from child classes.
I found an example to but wasn't able to replicate that - https://codesandbox.io/embed/4l3w20zomw
I think you need to use show(), hide(), and toggle() component methods and here's Link, but the difference here you will call show() method to mounted() hook it will call showModal method in mounted cycle so when application is hosted you will see modal like alert, example
<template>
<div>
<b-modal ref="myModalRef" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h1>Any Content here</h1>
</div>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs.myModalRef.show()
},
hideModal() {
this.$refs.myModalRef.hide()
}
},
mounted() {
this.showModal();
}
}
</script>
Related
I am trying to use a child compontent in another compontent and it does not work. I have been trying to solve this problem looking for typos etc. for hours, but can't find anything.
Menu.vue
<template>
<div class='navbar-and-alert'>
<alert/>
<nav class='navbar'>
</nav>
</div>
</template>
<script>
import Alert from './Alert.vue'
export default {
name: 'Navbar',
compontents: {
Alert
},
data (){
return {
}
},
}
</script>
Alert.vue
<template>
<section class='alert-section'>
<p class='alert-section__content'>
...
</p>
<a href=''><img src='/static/assets/img/close.svg' class='alert-section__close-icon'></a>
</section>
</template>
<script>
export default {
name: 'Alert',
}
</script>
I get this alert in console:
Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
The alert component works when used inside App.vue
components has a typo:
compontents: {
Alert
},
Should be:
components: {
Alert
},
I have a modal code in one component which i am using in the page, everything works fine but if I refresh the page than mounted hook called twice which is breaking my code. I want it to called only once.
import axios from '~/plugins/axios';
export default {
data() {
return {}
};
},
components: {
LoginSignupModal
},
mounted() {
console.log('mounted called......');
},
<template>
<div>
<p>
<LoginSignupModal :isModalOpen='isModalOpen' v-on:onModalClose="onModalClose($event)"></LoginSignupModal>
</p>
</div>
</template>
You cannot paste div into paragraph.
Remove <p> and it should work.
I am using the Bootstrap-Vue modal and want to stop it from opening at times. I'm not sure with how to block the default behavior.
<b-img
ref='cal-modal-button'
id='cal-modal-button'
class="cal-icon"
v-bind:src="imagePath + calimage"
v-b-modal.date-time-modal
>
</b-img>
And then the stripped down modal is set up as such:
<b-modal id="date-time-modal" name="header-modal" ref="date-time-modal" hide-footer title="Set Date and Time">
...
</b-modal>
Is there a way to prevent it from popping up without using JQuery?
From the documentation you can cancel modal by using show event :
<template>
// ...
<b-modal #show="onShow" ... />
</template>
<script>
export default {
// ...
data:() => ({
modalDisabled:true
}),
methods: {
onShow(bvModalEvt) {
if(this.modalDisabled) {
bvModalEvt.preventDefault()
}
}
}
}
</script>
show event reference :
https://bootstrap-vue.js.org/docs/components/modal/#comp-ref-b-modal-events
Always emits just before modal is shown. Cancelable
BvModalEvent object. Call bvModalEvt.preventDefault() to cancel show
In a Vuejs app, I have a modal dialog box pop up when user clicks a button. I need to pass a prop into this modal component. Normally, I have no trouble passing props to child components. Why is this case different? I'd rather not store any data in the store if avoidable. When the modal opens the prop collaboratorSelected is an empty String, i.e. it does not register the new prop value the parent is passing, but instead keeps the initial value set when the parent component mounts. This prop needs to be responsive.
Parent component...
<template>
<div>
<div v-for="collaborator in collaborators">
Edit
</div>
<EditShare #editedShare="editedShare" :collaboratorSelected="collaboratorToEdit" ref="modal" ></EditShare>
</div>
</template>
<script>
import axios from "axios";
import store from "../store.js";
import EditShare from "#/components/EditShare";
import $ from "jquery";
export default {
name: "Share",
data() {
return {
collaboratorToEdit: "",
collaborators: ["1", "2", "3"]
};
},
components: {
EditShare
},
methods: {
showEditShare(collaborator) {
this.collaboratorToEdit = collaborator;
let element = $('#editShare');
$(element).modal('show');
}
}
</script>
Child modal component...
<template>
<form #submit.prevent="handleSubmit">
<div class="modal" tabindex="-1" role="dialog" id="editShare">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title card-title-bigger">Add Share</div>
{{collaboratorSelected}}
</div>
</div>
</div>
</div>
</form>
</template>
<script>
import axios from "axios";
import store from "../store.js";
import $ from "jquery";
export default {
name: "EditShare",
props: {
collaboratorSelected: String
},
</script>
I believe that given that you're using jQuery, the jQuery code is executing before the property value is propagated to the child component.
Try wrapping the jQuery code in a $nextTick method and see if that works. Something like this:
this.collaboratorToEdit = collaborator;
this.$nextTick(function(){
let element = $('#editShare');
$(element).modal('show');
});
I did some experiments in this pen and I was able to see how the code in the function doesn't wait for the property value to propagate (as you have it) and how it waits for it when using $nextTick.
Let me know if it works.
I am building a web app. I have few components that are modals (that show data about customers, lessons, ...).
I search a way to show one of the components easily.
And if possible doing lazy loading.
What's the best way to perform this?
Check out conditional rendering, specifically v-if. This would only load the modal if the button is clicked for example.
https://v2.vuejs.org/v2/guide/conditional.html#v-if
Single page component:
<template>
<div>
<div
v-if="showModal"
class="modal">
Stuff
</div>
<button #click="toggleModal">
Toggle Modal
</button>
</div>
</template>
<script>
export default {
data () {
return {
showModal: false
}
},
methods: {
toggleModal() {
this.showModal = !this.showModal
}
},
}
</script>