I am declaring a html hyperlink with vue.js. The URL is set up by concatenating lets say "baseurl" and "id". However, I need to format the "id" first. I am trying to use a vue.js filter to process the "id" before concatenating with "baseurl". However, the filter applies to the whole URL, and not just to "id", which is what I want.
Let's say:
longid = "myprefix.id"
I want to obtain:
longid
I got this if I do:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid.substring(longid.indexOf('.')+1)">{{ longid }}</a>
However, I wanted to do it with a vue.js filter, which I like more. I tried:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid | shorten">{{ longid }}</a>
With the filter declared as:
filters: {
shorten: function(myString){
return myString.substring(myString.lastIndexOf(".")+1)
}
},
This is applied to the whole URL, and not just to "longid", so I finally have:
href="id"
instead of
href="https://mysite.mydatabase?ID=id"
I also tried to enclose the substring and the filter within parentheses:
<a v-bind:href="'https://mysite.mydatabase?ID='+ ( longid | shorten )">{{ longid }}</a>
but then I got a ReferenceError claming that the filter is not defined.
How can I make the filter apply only to "longid", being afterwards concatenated with the rest of the URL?
From what I get here is that you are trying to use a filter as method. You can achieve this using this.$options.filters.filterName().
For the given case, you should try something like:
<a v-bind:href="'https://mysite.mydatabase?ID='+$options.filters.shorten(longid )">{{ longid }}</a>.
Fiddle for reference: https://jsfiddle.net/sharitu/nbm2v1dx/3/
You can define method shorten and use like
<a v-bind:href="`https://mysite.mydatabase?ID=${shorten(longid)}`">{{ longid }}</a>
Consider change your shorten function:
shorten: function(myString){
return myString.split('.').pop()
}
Try this:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid | shorten(longid)">{{ longid }}</a>
Your filters function should change like this:
filters: {
shorten: function(myString,longid){
//return your code;
}
},
First argument is the url and second argument is longid parameter
Related
I've multiple Select tags in HTML form i.e 'Gender', 'District' etc where the default selection is All. The eloquent query is dependent on these tags. I can retrieve data from DB if user select an option like Male or Female but don't know how to use `All'.
here is html code of Gender Select tag.
<div class="col-md-2">
<label for="gender">Gender</label>
<select wire:model="byGender" class="custom-select form-control" name="gender" id="gender">
<option selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="combine">Combine</option>
</select>
</div>
and here is Laravel Code
public function mount()
{
$this->rows = DutySheet::where('gender', $this->byGender)->get()->toArray();
}
Note: this is Livewire function and byGender will be updated as the user select an option.
My question is what to use as value of All option in Select tag to retrieve all data from DB, "" is not working.
Your All options are represented by empty values (empty strings). You can leverage this by using the when() method on the query-builder, which effectively is an if-statement - the closure is only applied to the querybuilder if the first parameter is true.
$this->rows = DutySheet::when($this->byGender !== '', function($query) {
return $query->where('gender', $this->byGender)
})
->get()
->toArray();
You can chain these and add as many when() as you want to your query, to compute a more complex query with conditional conditionals.
You can add some logic to only apply the where condition when the select menu is set to any value other than "All".
If the user selects male, female or combine then the where condition will be run against that value, otherwise the query will return every record.
public function mount()
{
$dutySheets = DutySheet::query();
if ($this->byGender !== 'All') {
$dutySheets->where('gender', $this->byGender);
}
$this->rows = $dutySheets->get()->toArray();
}
I have a <a> tag in my vue component & by checking some condition v-bind:href may differ. I have used ternary operator for it and in the else part I want to pass id with the url, but with not as part of url (like '/test/' +id). id should not be in the url. so how to do it?
This is how I tried for it & it giving me the compile error due to comma before id in else part,
<a v-bind:href="type === 'single' ? '/user/'+user.id+'/edit' : '/profile',user.id">
Url should be like "/profile"
I have resolved it as follows,
<a v-bind:href="type === 'single' ? '/user/'+user.id+'/edit' : '/profile?user_id='+user.id">
I am trying to query the country column from one of my table and trying to group them so that one country name appears only once.
The controller code is
ViewBag.Countries = (from pT in _context.InfoProducts
group pT by new { pT.Country } into g
select new
{
Country = g.Key.Country
}).ToList();
In my view I am trying to show this list of countries in a dropdown like this
<div class=" form-group">
#Html.Label("Country")
<div class="col-md-12 ">
#Html.DropDownList("Country", new SelectList(ViewBag.Countries, "Country"), "Select Country", new { #class = "col-form-label col-md-12 label-align" })
</div>
</div>
The problem I am facing is though it is returning the expected names of the countries, the result is generating as a key, value pair something like
{Country = USA}
{Country = Canada}
The HTML generated copied from inspect element is given below
<select class="col-form-label col-md-12 label-align" id="Country" name="Country">
<option value="">Select Country</option>
<option>{ Country = USA}</option>
<option>{ Country = Canada}</option>
</select>
How can I get only the country name in the dropdown instead of the result I am currently getting.
Rather than using group by, it sounds like distinct would be a better fit:
_context.InfoProducts.Select(x => x.Country).Distinct().ToList();
This will give you back a list of strings to use, which won't give you the key-value pair problem you're currently having.
One more thing, when you use new SelectList(ViewBag.Countries, "Country") this overload of SelectList's constructor will try to set the value of Country as the selected item, but this doesn't exist in your list, so Select Country will always appear as selected. If you want that to select an actual country, then it would have to look something like:
new SelectList(ViewBag.Countries, "Canada")
where you would fetch Canada from the data for the current product.
I have this in my qweb report
<span t-esc="formatLang(get_routing_data(o)[-1]['total'] , digits=3)"/>
it works ok, but sometimes it returns an empty list and then i get error index tuple out of range. how can i avoid it?
You could set the return value of the call to get_routing_data into a variable and make check the value using t-if conditions before use it, like:
<t t-set="routing_data" t-value="get_routing_data(o)"/>
<span t-if="routing_data and len(routing_data) > 0 and routing_data[-1].get('total', False)" t-esc="formatLang(routing_data[-1]['total'], digits=3)"/>
I want to select the record from the list box using text. how can i use the filter function to select the particular record. I will be having many options but i want to select the value which i want by checking the text (e.g Spanish). I dont want to select value by index becoz if i do that i wont be able to verify test, moreover list gets updated. kindly help. below r my html code.
<ul class="addList">
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Mandarin</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">English</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Spanish</li>
</ul>
Yea i can select the record by index. but i want something like selectbyvisibleText which is available in Selenium.
Finally got the solution. created a function SelectRowByCellValue and used to call it where ever i want by
SelectRowByCellValue(AGP.SkillList, Data.SkillSelect);
SkillList = element.all(by.css('Ul.addList li'));
SkillSelect = Value that u want to select. (Spanish)
this.SelectRowByCellValue = function (Elem, Texts) {
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts) {
element.click();
return false;
}
});
}).then(function (filteredElements) {
});
};