I know that there are similar questions with jquery, but this is related to vue.js
I'm using uiv which is a boostrap version for vue.js. Checking the docs I'm trying to trigger manually the popover using trigger="manual" with a hover event:
<popover title="Title" v-model="show">
Toggle Popover
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
<script>
export default {
data () {
return {
show: false
}
}
}
</script>
Well, I understand why the popover is being closed due when I leave the button I set show to false.
So my question is: Where do I have to place that #mouseleave event in order to prevent closing the popover when it is being hovered?
Here I have a plunker link: https://plnkr.co/edit/gTsOJE4k8fQUMcMUpqS6?p=preview
I've solved my problem doing this:
<popover trigger="hover" title="Title">
<a href="#" #click.prevent>Toggle Popover</a>
<template slot="popover">
<p>Popover content</p>
</template>
</popover>
Basically, we can use trigger="hover" to prevent closing the popover when it is being hovered.
Take a look at this example: https://plnkr.co/edit/RSjhazfxqBhaNqcKijXe?p=preview
Related
I'm trying to implement generic modal component with Vue 3.
And I want to close modal window on click outside the modal's content.
So I added 'close' event on modalWrapper and 'contentClick' to prevent closing (bubbling) when content is clicked:
contentClick(event:Event){
event.stopPropagation();
}
Modal:
<template>
<teleport to="body">
<div class="modal-window" v-on:click="close" v-show="isOpened">
<slot class="modal-window__content" v-on:click="contentClick($event)"></slot>
</div>
</teleport>
</template>
The problem is that contentClick(event:Event) is not fired for some reason. I can wrap slot into another div and put contentClick event on it, but not sure that it's a good solution
This is the first time I am using modal component. Inside a for loop of an array of objects, I also added a modal component, "Add Item". The v:onClick="showSectionID" function in the SHOW button within the modal should just consolelog the id of the object who's associated modal was opened and click it's respective SHOW button. But instead it is giving the id of the last object wherever I click the SHOW button from any of associated modals.
Just to test, I removed the whole modal and only kept the SHOW button and in this case it gives me the correct id. I really cannot figure out what s is wrong in the modal and searched several sources in the internet to see a similar solution but couldn't find. See code:
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="modalShow = !modalShow">Add Item</b-button>
<b-modal v-model="modalShow">Fill form to add an item !
<button v-on:click="showSectionID (section['uuid'])">SHOW</button>
</b-modal>
</div>
</template>
</div>
In your code, you are creating a modal component for each section within the for loop.
I wouldn't be surprised if actually all your modals show up on the screen, but you see the last one because it's on top of all the other ones. But it also depends on how the modal is implemented.
I suggest you to move the modal template outside your for loop and change what you store in your component data so that you know which section to show in the modal.
Let's say your data() will look like this:
data() {
return {
modalVisible: false,
modalSectionUUID: null
}
}
Then you can create two methods to show and hide the modal:
methods: {
showModal(sectionUUID) {
this.modalVisible = true;
this.modalSectionUUID = sectionUUID;
},
hideModal() {
this.modalVisible = false;
this.modalSectionUUID = null;
}
}
Now, your template will finally look something like this:
<b-modal v-model="modalVisible">Fill form to add an item !
<button v-on:click="showSectionID(modalSectionUUID)">SHOW</button>
</b-modal>
<div v-for="(section) in allDataObject['Section']" :key="section['uuid']">
<h4>Section Name: {{ section["sectionName"] }}</h4>
<h4>Section Description: {{ section["sectionDescription"] }}</h4>
<template>
<div>
<b-button #click="showModal(section['uuid'])">Add Item</b-button>
</div>
</template>
</div>
I am using popover from Bootstrap-Vue, and I get this error:
[BootstrapVue warn]: popover - Unable to find target element in
document.
Everything work just fine, but I have a lot of warnings and I want to fix them.
Parent Component
<template>
<popover />
<label id="popover-target-EXAMPLE">
<i class="far fa-question-circle"></i> Parish
</label>
</template>
<script>
import Popover from './Popover';
export default {
components:{
Popover,
}
}
</script>
My popover Child Component
<template>
<div>
<b-popover target="popover-target-EXAMPLE" variant="primary" triggers="hover" placement="top">
<p class="popover-style">TEXT</p>
</b-popover>
//here are multiple <b-popover>....
</div>
<template>
Try to put the popover component after the targeted element
After some time I found out the problem.
In that Popover child I had multiple popovers, and some of them are not in parent component.
So to fix the warnings I removed all <b-popover> that don't have an ID in parent component.
I'm using this handy pagination tool called vuejs-paginate and it works just fine in terms of functionality when I click each individual page item, but when I press the navbar brand (which switches to page 1), the pagination tool does not switch the active class to page 1 and the active class just remains on the page you were previously at.
Here's my pagination code:
<template>
<section role="region" class="paginate py-md-5 py-4" id="paginate">
<div class="container">
<div class="row">
<div class="col-12">
<paginate
:page-count="20"
:click-handler="clickCallback"
:prev-text="'<'"
:next-text="'>'"
:container-class="'pagination'"
:page-class="'page-item'"
:page-link-class="'page-link'"
:next-class="'page-item'"
:next-link-class="'page-link'"
:prev-class="'page-item'"
:prev-link-class="'page-link'"
class="justify-content-center mb-0"
>
</paginate>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
methods: {
clickCallback(pageNum) {
this.$router.push({
path: `/page/${pageNum}`
})
}
}
}
</script>
<style lang="scss">
</style>
I was thinking of using some sort of way to programmatically click the first page item of the pagination when clicking on the navbar brand, but I'm not sure how to achieve this. Thanks for the help!
After a lot of debugging, I found out that it was actually where I had placed my pagination component. In my Nuxt app, I had put it inside default layouts. This means that when I had clicked on the navbar brand to go to the first page, the pagination did not remount. So what I did to resolve the problem was to transfer my pagination component to its individual pages. Now, when I switch from route to route, the active class will change because the pagination component remounts to react to the changes.
As per example given in aurelia documentation I am opening dialog box with viewmodel (say prompt ). This prompt has view inside in which I am adding "router-view" tag.
My routes are already configured. So when first time I open dialog it opens correct views as configured in routes and everything works well. But when I close dialog and re-opens dialog, It's not showing first route view. If I click other route link and come back to first route it works.
I have observed it's not creating instance of view model of first route( when opened dialog second time).
How to fix this issue?
Prompt html
<template><div class="row">
<left-menu ></left-menu>
<router-view></router-view>
</div></template>
<template>
and left-menu.htm
<template>
<div class="list-group">
<template repeat.for="item of items">
<a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
</template>
</div>
Using a router inside a modal window seems off to me. The router is used to manage pages, but a modal is used to manage content within a page.
I would suggest building a modal window component, you can use <slot> tags to inject content and set it's model bindings to any data within the current view model.
Here's an example of my component that I use for this.
<template>
<div show.bind="visibility" class="modal-window">
<div>
<button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
</div>
<slot></slot>
</div>
<div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>
-
import { bindable } from 'aurelia-framework';
export class ModalContent {
#bindable visibility: boolean;
close(){
this.visibility = false;
}
}
<modal-content id.bind="'add-variant-window'">
<h4>Modal Content</h4>
<div>you can bind this to things on the current viewmodel</div>
</modal-content>