I would like to open a custom context menu whenever the user clicks on a table cell in my vue page. So I'm trying to use the row-contextmenu event as defined here, but it doesn't fire.
Table in the template:
<b-table #row-clicked="leftClicked" #row-contextmenu="rightClicked" border no-border-collapse striped :fields="fields" hover :items="items"></b-table>
Vue methods:
leftClicked() {
alert("clicked");
},
rightClicked() {
alert("right clicked")
}
The standard row-clicked event works fine and gets fired when i left-click on any row in the table. row-dblclicked also works fine. However, the row-contextmenu event doesn't even get fired to begin with and the standard browser context menu appears, even if i use #row-contextmenu.prevent (Chrome & Firefox). There are no errors in the console in both browsers.
The examples on bootstrap-vue and jsfiddles work fine in both browsers. So it seems to be a local problem?
Thanks for any help :)
It turned out that my bootstrap-vue version was too old. I upgraded to 2.14.0 and everything is working fine.
Related
I have a component that has a router-link as a root tag. I want to prevent its default link behavior so it would fall back to the link if something is wrong with JS or it's disabled.
I made it work in Chrome with such event modifiers:
#click.native.capture.prevent
But it doesn't work in Firefox.
What am I missing?
Codesandbox
UPD: I found a workaround, but I'm still curios why this isn't working
It seems like Firefox treats multiple events on an element differently than Chrome which is why your code doesn't work as expected. I'm not exactly sure at this point, but it might be that Chrome works off all event listeners from the bottom up, whereas Firefox works from top down. This results in Chrome not firing the 1st event since the previous one (in this case the 2nd) uses prevent default, as you can see on the images below (that's just the event you added using #click.native.capture.prevent).
Chrome event handler:
Firefox event handler:
Since Vue Router adds a click event to a router-link on default you can solve this issue by either adding a wrapper to your child component (in this case the event won't get captured by the router-link since the wrapper prevents it)
<div>
<router-link to="/shop"> text link</router-link>
</div>
or by manually overwriting the event property.
<router-link to="/shop" event=""> text link</router-link>
You can see how it works using a wrapper here.
We have been having a very strange problem in a vue-js (#vue-cli, Build version) application. There was a button in App.vue that had an onclick
<button #click="goIRList" id="irlistBtn">IR List</button>
that was working for fine for some users, every time, and not others. For the others, I checked (with alerts) that the goIRList code was not reached at all. These others had this issue with any browser we tried. They did not have the issue when Vue+Developer Tools was open - making it harder for me to debug it.
Instead of the goIRList code, these users got a page with just the error message
Cannot GET /menu.csp
That was especially perplexing, because menu.csp is code from a completely different system, though one also associated with the same computer. It is never referenced in the vue-js application.
Eventually I realized that what was happening was a submit, even though the button was not in any form on the page [I had thought that a button is only a submit type by default, if it is inside a form]. As soon as I added a type, <button type="button"...>, the issue went away completely.
Could someone explain why this was happening? And why did it work for some users? Thanks!
Update: and now the problem is back, same conditions: for them and not for me. Nothing changed. I also added .prevent to the button's onclick:
<button type="button" #click.prevent="goIRList" id="irlistBtn">IR List
and no help. So maybe that wasn't the issue. Anyhow, now I'm asking for a fix as well as an explanation. Thanks!
Add a "submit" event catcher in the form, and prevent the default action.
<template>
<div id="app">
<form #submit="submit">
<input value="Tom">
<button>Submit</button>
</form>
</div>
</template>
<script>
export default {
name: "App",
methods: {
submit(e) {
e.preventDefault();
console.log("Success!");
}
}
};
</script>
And someone pointed out the answer to me. Ridiculous: those two buttons were hidden underneath a logo image that was higher up on the page. It was the image that contained the bogus link.
I never got the error, because I can't see so well, so I keep the sizing high, and the buttons were far away from the logo. Others had a more normal page sizing, and everything got smaller except for that image; the invisible margin of the image went over the buttons, and someone trying to click on the buttons triggered the link.
I set the image to resize with the page and all is well.
I am working my first project with VueJS and i have a problem with my component.
My project is an chat app, and i am creating a loading component for the messages. This is how the component works: when user enters a conversation, the component shows, and when all the messages are loaded, it disappear.
Everything works fine, but the problem is when i click on the component, it stops working. It does not dissapear. The only way for it to dissappear is to enter another conversation.
<loading-message
v-if="showLoadingMessages"
/>
Does anybody knows how to solve this problem. I try to use style: pointer-events: none but still not work.
I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal
I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.
In vuejs i have code for main modal -
showModal () {
this.clearForm();
this.formInfo.formSubmitted = false;
this.$refs[this.modalInfo.id].show();
}
this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-
showExtraModal:function(){
this.$refs['extraModal'].show();
}
How can I solve this problem in vue js.
Seems to be a limitation of Bootstrap (see docs):
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.
I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.
I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.