Chrome is warning me that I have: "Added a non-passive event listener to a scroll-blocking 'mousewheel' event".
I want that warning to go away. I'm using Vue js 2.5.13 and according to the documentation, you can use <div v-on:scroll.passive="onScroll">...</div> to make events passive. However, I cannot figure it out for a mousewheel event.
Here is my code:
<select v-model='selectWatcher'>
<option v-for="option in myOptions" v-bind:value="option.id">{{option.name}}</option>
</select>
If it helps, selectWatcher, is a function within my vue instance's watch section.
I have tried:
<select v-model='selectWatcher' v-on:mousewheel.passive>
<select v-model='selectWatcher' v-on:mousewheel.passive="true">
<select v-model='selectWatcher' v-on:scroll.passive="mousewheel">
None of this works, and I still get the warning. What am I doing wrong? Do I need to mark the selectWatcher as passive somehow?
Since you're not creating a mousewheel event, you won't be able to modify the event it's complaining about. There's no way to say "make all mousewheel events passive".
Related
Instead of showing data from a component, I'm currently routing a user to login at /account if they are not authorized, by doing this:
<template>
<q-card v-if="authorized">
<q-card-section>
<DataGrid/>
</q-card-section>
</q-card>
<span v-else>
{{ this.$router.push('/account') }}
</span>
</template>
It's simple and works, but I'm not sure its really correct because although it pushes the user to where I want them to be, the console gets this error:
uncaught exception: undefined
(I'm currently on Quasar v1.9.14)
Basically I want to show the data if the user is authorized or redirect if they are not authorized, or become unauthorized later.
first of all, you do not need to use this in the template.
If you want to route them based on the authorized value, you could probably use a watcher.
Alternatively, I would probably do something in mounted which checks if the user can be there. E.g.
async mounted ()
{
const authorized = await fetch("something")
if (!authorized)
{
this.$router.push('/account')
}
}
Its simpler than I thought. I believe the answer is events. The span can simply change to:
<span v-else #load="$router.push('/account')"/>
<span v-else :class="authorized ? '' : $router.push('/account')"/>
Its even simpler because its a one liner
It will work even after mounted() has already fired and authorized becomes false
Actually, I now can delete similar logic in mounted() (DRY principle)
EDITS:
After proper testing I found it actually does not work with my first #load event example.
Recently $nexttick appears to have broken on IE 11, in particular regarding input bound variable. This is causing forms with dynamic content to submit missing the required data
<form id="something" action="/" method="post">
<input type="hidden" name="token" :value="token" />
</form>
// js code
promise.then(function() {
self.$nextTick(function () {
document.getElementById('something').submit();
});
});
We have found that using the setTimeout for 1 second around the form submission allows enough time for the DOM to be updated so the token can be included in the form submission.
Has there been any changes to nexttick / IE11 that we need to account for?
nextTick allows you to do something after you have changed the data and VueJS has updated the DOM based on your data change, but before the browser has rendered those changed on the page. If you want to explicitly re-render the DOM, use requestAnimationFrame or setTimeout.
You could check this thread.
I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example
I want to click the submit button of the webpage i am displaying in my Web Browser but it seems not to work at all here is my code:
WebBrowser1.Document.Forms(0).InvokeMember("image")
i was basing on the html code of the button i want to click which is:
<div class="buttonRow forward">
<input type="image" src="includes/templates/template_default/buttons/english/button_send.gif" alt="Send Now" title=" Send Now ">
</div>
did i miss something? i really need help.
Try setting this property
Webbrowser.AllowNavigation = True
I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.
When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.
Here's what my custom widget's template looks like:
<div class='customWidget'>
...
<div dojoAttachPoint="mainDiv" class="mainDiv">
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>
<input dojoType="dijit.form.ComboBox"
store="stateStore"
value="California"
searchAttr="name"
name="state2" />
<button dojoAttachEvent="onclick:chooseState">OK</button>
</div>
...
</div>
In the widget code, I require the combobox and read store:
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)
Do you have widgetsInTemplate in your widget declaration?
dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {
widgetsInTemplate: true,
// rest of widget JS here
});
Here's an article about including other widgets in your template.
Have you tried adding:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
dojo.parser.parse();
});
</script>
(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?