Pass parameter in v-bind:href - vue.js

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">

Related

Setting condition for vue bootstrap checkbox component prop

I am new to Vue and I have to fix the following issue for work. I have a Bootstrap Vue b-form-checkbox-group similar to the one bellow. The listofOption comes from backend and from legacy databses. Sometime the ColumnName is empty or null. Right now it shows null or a blank space, but I want it to print the text "_blank" if that is the case.
<b-form-checkbox-group id="flavors"
v-model="status"
:options="listofOption"
:text-field="ColumnName"
:value-field="ColumnName"
name="flavors" class="ml-4" aria-label="Individual flavours" stacked>
</b-form-checkbox-group>
I have replaced the :text-field with the following line but can't make it work:
:text-field="[(ColumnName && ColumnName != null && ColumnName != '') ? ColumnName : '_blank']"
You could pass that value binding via function.
getColumnName(ColumnName) {
return (ColumnName && ColumnName != '') ? ColumnName : '_blank'
}
Then:
:text-field="getColumnName(ColumnName)

How to break string data coming from Api response in Laravel

This my data coming from Api : "TAX_BREAKUP": "ab=4835,ay=1400,at=852,cb=4835,cy=1400,ct=852"
#foreach(explode(',', $data['TAX_BREAKUP']) as $amt)
Adult Priceā‚¹ {{$amt}}
Tax{{$amt}}
#endforeach
An this is code which I am trying to break the string.
If I understand your question, what you want is :
$Tax_arr = explode(',', $data['TAX_BREAKUP']);
foreach($Tax_arr as $amt){
$amt_arr = explode('=', $amt);
echo $amt_arr[0]." is ".$amt_arr[1]."<br>";
}
$amt_arr[0] is the attribute name and $amt_arr[1] is the value

Syntax of Vue.js filter within v-bind:href

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

Empy list on return

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)"/>

Binding Expression in Aurelia if.bind

I would like to put in a simple expression to a template in Aurelia.
When working in a loop of <span repeat.for="link of links">, I want to show a '/' between all items, except after the last one.
I would expect I could use the following:
<span if.bind="${$index + 1} !== ${links.length}"> / </span>
But this gives me the following error:
Uncaught (in promise) Error: Parser Error: Missing expected : at column 10 in [${$index + 1} !== ${links.length}]
Is there a way I can do this?
Try if.bind="$index !== links.length - 1" instead of doing string interpolation. That should make it work.
or even shorter:
<span>${links.join(' / ')}</span>