"TypeError: ranges.clickRange is not a function" when setting a custom range slot for vue2-daterange-picker - vuejs-slots

I use Innologica/vue2-daterange-picker v0.4.3, it was working fine without range slot. I wanted to add range slot by following the official documentation with something like this (made a simple copy paste of how we can use range slot):
<!-- ranges (new slot syntax) -->
<template #ranges="ranges">
<div class="ranges">
<ul>
<li v-for="(range, name) in ranges.ranges" :key="name" #click="ranges.clickRange(range)">
<b>{{name}}</b> <small class="text-muted">{{range[0].toDateString()}} - {{range[1].toDateString()}}</small>
</li>
</ul>
</div>
</template>
I'm able to see the UI change, BUT when I click on ranges I got this error:
[Vue warn]: Error in v-on handler: "TypeError: ranges.clickRange is not a function"
In my IDE, if I "cmd+click" on the clickRange( ) function, I'm able to see the third party source code, meaning the function exists.
Did anyone have faced similar issue, and how you fixed it ?

I had to update to v0.5.1, it's working perfectly now!

Related

How to iterate over a list and create hyperlinks based on the text in thymeleaf?

I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>

Why is JMeter showing an undefined variable error in the response body even if the web page is working properly if I run it manually?

(1/1)
ErrorException
Undefined index: current_institute_id
I am getting above error in jmeter response body but its working fine if i run web page manually . Also i have passed the value of current institute in request.
enter image description here
enter image description here
<div class="container">
<div class="trace trace-as-html">
<table class="trace-details">
<thead class="trace-head"><tr><th>
<h3 class="trace-class">
<span class="text-muted">(1/1)</span>
<span class="exception_title"><abbr title="ErrorException">ErrorException</abbr></span>
</h3>
<p class="break-long-words trace-message">Undefined index: current_institute_id</p>
</th></tr></thead>
<tbody><tr><td><span class="block trace-file-path">in <span title="/var/www/html/mycc/t11/app/Http/Controllers/inquiry/AdmissionFormController.php line 1666"><strong>AdmissionFormController.
As I can see in the Screenshot the information provided is not enough to completely investigate the issue. But I can notice that the data you are sending is not recognized by the server. This means you may be sending data that the server was not expecting.
The solution is to record the script manually after understanding the flow.
Found a video explaining the process. Maybe it'll help you understand the way how you can record manually and not depend on tools that ultimately misguide you.
https://www.youtube.com/watch?time_continue=10&v=Njjz1kzS24E
I'm not sure that'll help with the information provided by you. But it may lead you to a solution

Passing a custom event in a Laravel Blade View

I have a PHP blade file and I have a list of components working as they but can't seem to pass in a custom event in the kebab style casing the documentation mentions .
Blade template
<div id="app">
<Shop
:active-tab="activeTab"
#show-product-modal="handleShowProductModal"
>
</Shop>
</div>
Even the #show-product-modal color syntax in my text editor shows something is off but I can't tell what the issue is here. I've even tried camel casing it but that doesn't do it either. However, if i changed it to 1 word , like "#showitnow", it works fine.
When using VueJS you can't use kebab case for listening to component events. Instead your blade template should read:
<div id="app">
<Shop
:active-tab="activeTab"
#showProductModal="handleShowProductModal"
>
</Shop>
</div>

Navbar not initializing in kendo ui mobile webpage

for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.

How to pass event and other arguments in grid's context menu item handler?

I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.

Resources