i am using InArray helper to check weather a value is present in array or not and render the block according to result.
if i hardcode the value then its working fine like show below.
{{#inArray this.likes "5e20c3d45df5dc29e4a403c3"}}
<button class="btn btn-primary likebtn" value="{{this._id}}">unLike</button>
{{else}}
<button class="btn btn-primary likebtn" value="{{this._id}}">like</button>
{{/inArray}}
but i want the value from an object pass while rendering the template. my value is in user_data.user_id.
i tried the below code but its not working .
{{#inArray this.likes "{{user_data.user_id}}"}}
<button class="btn btn-primary likebtn" value="{{this._id}}">unLike</button>
{{else}}
<button class="btn btn-primary likebtn" value="{{this._id}}">like</button>
{{/inArray}}
Create custom hbs helpers.
hbs.registerHelper("in_array", function(key, arr, options) {
if (arr.includes(key)) return options.fn(this);
else return options.inverse(this);
});
And use it in your hbs file like this.
{{#in_array key arr}}
<h1>{{key}} is present</h1>
{{else}}
<h1>{{key}} is not present</h1>
{{/in_array}}
Related
I have an button on my razor page where I submit a value to my post method.
All worked as I want to
<input type="submit" value="Resend Link" asp-for="#resendLink" class="btn btn-primary" />
in my c# I catch the value on post
public async Task<IActionResult> OnPostAsync(string resendLink)
Now I simply wanted to localize the language of the button
<input type="submit" value=#Localizer["Resend Link"] asp-for="#resendLink" class="btn btn-primary" />
Localizer does not work
It works if I use it without asp-for tag or if I declare it with button tag
<button type="submit" asp-for="#resendLink" value="ResendLink" class="btn btn-primary">#Localizer["Resend Link"]</button>
However like that it does not anymore transfer the value to my post method.
How can I localize it? and still have the transfer?
Tks for helping!
Asp.net core bind data with name attribute.As you said It works if I use it without asp-for tag or if I declare it with button tag.You can remove asp-for tag and add name attribute like this:
<input type="submit" value=#Localizer["Resend Link"] name="resendLink" class="btn btn-primary" />
I'm using Nodejs with handlebars as view engine. I also use vuejs in hbs files. Now I came to a problem with a function. So I iterate users and then I try to pass the username to the function and when I execute the function I get this error:
Property or method "Thomas" is not defined on the instance but referenced during render
This is the code:
<button #click="serveUser({{username}})" class="btn btn-success btn-sm">Add</button>
methods: {
serveUser(username) {
console.log(this.username)
}
}
It won't be logical to define every username in data in vue. How can I fix this ?
UPDATE MORE CODE
{{#each notServedUsers}}
<li>
<p class="badge badge-danger">NEAPTARNAUTAS</p>
<span class="username">{{username}}</span> #{{ticketID}}
<button #click="serveUser(username)" class="btn btn-success btn-sm">Aptarnauti</button>
</li>
{{/each}}
You can simply use username as a variable in your event handler if it is a vue property:
<li v-for="{username,ticketID} in notServedUsers">
<p class="badge badge-danger">NEAPTARNAUTAS</p>
<span class="username">{{username}}</span> #{{ticketID}}
<button #click="serveUser(username)" class="btn btn-success btn-sm">Aptarnauti</button>
</li>
Your problem is in your method, you're using this.username when you should use username since you're passing the variable to serveUser like this:
<button #click="serveUser(username)" class="btn btn-success btn-sm">Add</button>
methods: {
serveUser(username) {
console.log(username)
}
}
Here you have a working JsFiddle: https://jsfiddle.net/SilliconMachine/zv5L1hs8/14/
I have this code:
<div id="blocks">
<component v-for="block in blockList"
:is="block.component"
:id="block.uniqueId"
:init-show-header="showHeaders"
v-model="block.model"
v-on:content-block-remove="removeBlock"
:key="block.uniqueId">
</component>
</div>
addBlock(name) {
let block = new Object()
block.model = new Object()
block.uniqueId = name + '-block-' + this.blockCount
block.component = name + '-block'
this.blockList.push(block)
this.blockCount = this.blockCount + 1
},
<div id="buttons">
<button v-on:click="addBlock('taxonomy')" type="button" name="button" class="btn btn-primary btn-sm">Add Taxonomy</button>
<button v-on:click="addBlock('text-input')" type="button" name="button" class="btn btn-primary btn-sm">Add Text Input</button>
<button v-on:click="addBlock('header')" type="button" name="button" class="btn btn-primary btn-sm">Add Header</button>
<!-- <button v-on:click="addBlock('text')" type="button" name="button" class="btn btn-primary btn-sm">Add Text</button> -->
I have different types of components that have different kind of options stored in data object. I plan to save these options to the database upon saving the page where they are added and their settings adjusted. Each component type, its order on the page and components options are going to be saved in the database.
My question is, how do I initialise this page again after refreshing it and getting all the components and their options from the database? How would I get the options to each component when adding them in a loop on a mount event of the parent component where I load all components saved in the database and want to render them with the correct options?
What are my options?
I suggest just use bare v-bind with an object of attributes for this.
Look: https://v2.vuejs.org/v2/api/#v-bind
Thats what I mean. Let's say you have this.someTestParams = {param1: 'test string', param2: true, param3: false} in your component.
So you just need to write: <my-child-component v-bind="someTestParams" />
Instead of: <my-child-component v-bind:param1="'test string'" v-bind:param2="true" v-bind:param3="false" />
I am automating an application with selenium.There are no normal labels like id,tag by which I will be able to find an element. So I was using the xpath[driver.findElement(By.xpath())]. But now i find that some of the xpaths of the WebElement changing dynamically while runtime and so my test cases are failing.Even the relative xpath option is not available for the HTML.I am pasting a part of the html of the AUT. Please let me know how to handle this scenario .
<div>
<button class="btn btn-primary ng-hide" ng-click="unlockOrder('/content/boss/en/dashboard');" ng-show="enableUnlockButton" type="button">Unlock Order</button>
<button class="btn btn-primary" ng-click="discardOrder('/content/boss/en/create-order/pre-order-options');" type="button">Discard Order</button>
<button class="btn btn-primary" ng-click="saveOrder(showSaveButton && ban_search.$valid);" ng-disabled="showSaveButton==false || ban_search.$invalid" type="button" disabled="disabled">Save Order</button>
</div>
I would rely on the button text:
driver.findElement(By.xpath('//button[. = "Unlock Order"]'))
where . refers to button's text.
I have an application which is getting some data from MySQL Database by using Bootstrap 3 Group Button and Bootstrap select library as:
<div class="panel panel-default">
<div class="panel-heading">4 - Select Species <button type="button" class="btn btn-default btn-xs pull-right" id="specicPop">?</button></div>
<div class="panel-body">
<div class="btn-group" id="speciesSelect">
<button id="allspecies" type="button" class="btn btn-default btn-sm">All Species</button>
<button id="aquatic" type="button" class="btn btn-default btn-sm">Aquatic</button>
<button id="terrestria" type="button" class="btn btn-default btn-sm">Terrestrial</button>
</div>
<select class="selectpicker" id="selectPicker" class="form-control" data-container="body" data-live-search="true">
<option value="0">Select From The List</option>
</div>
</div>
and the ajax is as:
$('.btn-group .btn').click(function(){
$( ".selectpicker" ).selectpicker("refresh");
$.post(
'con/animalList.php',
{ selType : this.id },
function(data)
{
$('#selectPicker').html(data);
}
);
});
the PHP part is like
if ($result->num_rows > 0)
{
$resultStr.= '<option value="0">Select From The List</option><option';
while($row = $result->fetch_assoc())
{
$resultStr.= '<option value="'.$row['id'].'">'.$row['fName'].'</option>';
}
}
else
{
$resultStr = 'Nothing found';
}
Now the problem is , I have to Double click or Click Twice to load the select element with options from database. Please be informed that PHP part is working fine and I am getting correct data but I can not figure it out why the First click is not working!
Can you please let me know how to fix this?
Thanks
Use the debugger tools of your current browser (usually visible through F12 on Windows).
Then add debugger; to your code to see when the code gets executed.
$('.btn-group .btn').click(function(){
// this will pause your execution in your browser
// and shows you the line
debugger;
});
This way, you will see if the first click is realy not triggering.
If it is not, you might have an error somewhere different in your code.
Do you have other JS code that might break your code?