There is a new syntax for scoped field slots in tables, see https://bootstrap-vue.js.org/docs/components/table#scoped-field-slots , which looks like
<template v-slot:cell(myColumn)="data">
...
where myColumn is interpreted as a string - key of field from fields to display in our table.
How can I use a variable instead of string? Let's say something like:
let myColumnName = "myColumn";
<template v-slot:cell(myColumnName)="data">
...
When using the new v-slot syntax of Vue 2.6.x, you can use the dynamic slot name syntax.
<template v-slot:[`cell(${myColumnName})`]="data">
or set the full slot name in a variable:
let fieldName = 'myColumn'
let slotName = `cell(${fiedlName})`
<template v-slot:[slotName]="data">
Anything between the square brackets is interpreted as a javascript expression. Just note that you cannot have spaces in the expression (HTML attribute names cannot have spaces).
The second example above is your best bet when using DOM templates. Just note that your variable names should probably be lower cased when using DOM templates (the browser lower cases everything before the = when it parses the template).
If using Single File Components (SFC), then you do not need to worry about letter casing.
To pass in variables you gotta add square brackets around the entire thing.
v-slot:[`cell(${myColumnName})`]="data"
or (whichever you prefer)
v-slot:['cell('+myColumnName+')']="data"
Related
I am trying to bind an expression to a URL using v-bind of vue.js.
The binder expression will be a year of the folder and I want that expression to render in the links.
I am trying to get this to bind correctly.
Can someone see what I am improperly concatenating?
<a v-bind:href="'https://www.exmaple.com'+{{$route.params.year | year}}'+'&FolderCTID=0x012000507B97BC3FFDCE4D854E'">My Link</a>
I think you're looking for this:
<a v-bind:href="'https://www.example.com/' + ($route.params.year || year) + '&FolderCTID=0x012000507B97BC3FFDCE4D854E'">My Link</a>
Key changes:
|| instead of |. The latter is a bitwise operator.
Added parentheses to ensure the || is applied correctly. Otherwise the + operators will be applied first.
Ditched the {{ ... }}. They shouldn't appear within v-bind expressions.
Removed the extra ' after the }}.
Added an extra / after the .com.
This will give, for example:
https://www.example.com/2019&FolderCTID=0x012000507B97BC3FFDCE4D854E
It seems likely you'd want a ? in there somewhere but that wasn't included in the original code.
You haven't mentioned what year is but it appears that it's a default for when the year route param is missing. That's certainly what I've assumed.
You may also want to consider using a computed property for this as it's a little complicated for template logic.
Update:
Based on the comment it seems that you intended | to be a Vue filter.
A filter can only be applied to the end of the whole expression. You cannot use it in the middle. If you try to use it in the middle it will just be interpreted as the JavaScript | operator and not as a filter.
I suggest using a method instead. If you have a method called formatYear it can be called using formatYear($route.params.year) within your v-bind expression.
I added this into my hyperlink and it works like a charm! I am sure someone will need this
+ $options.filters.year($route.params.year) +'
There exist any way in Vue.js to make a sum between two interpolation values inside an html tag?
ex:
value1= 5
value2= 3
<span> {{value1}} + {{value2}}</span>
So I would like to know if its posible to obtain a third value rendered on the span tag adding the two values.
<span>{{value1 + value2}}</span>
I see no reason to manipulate data with operations on the template in this case.
The best (and simple) way, probably is to sum that values in your js code and render the result at template as another data property.
Although there is a Vue magic trick that allows you to made that.
It is called Computed Properties. Where you will be 'listening' some dependent data to create another data.
I totally recomend that you read Computed Properties documentation and see how it works
Here is the link:
https://v2.vuejs.org/v2/guide/computed.html
:)
Inside the {{}} you can run any JS really, so you should make a method that handles adding the 2 variables and inside that method it can check that both are numbers and handle converting strings if needed. Or you could try to turn this logic into a computed property.
Is there a way in template (stringtemplate.org 4 engine) to use a GUID as an attribute to be substituted or to reduce stringtemplate's expressiveness so it will not evaluate the value between the delimiters as anything other than an attribute lookup?
Example:
The following fails with a Antlr4.StringTemplate.Compiler.TemplateException.
Template template = new Template("{AAA04EC0-301F-11D3-BF1B-00C04F79AAAC}", '{', '}');
Yes and no.
Yes: The StringTemplate group syntax was updated to allow - characters to appear as part of an attribute name (but not as the first character). I'm not sure the template lexer was update to allow you to actually use such an attribute. You should file an issue on the issue tracker for the project:
https://github.com/antlr/stringtemplate4/issues
No: An attribute name cannot start with a digit, so only GUID values starting with a letter would work.
I'm trying to set a variable with a dynamic name. This means the name for my new variable comes from another variable:
<#-- in real world I wouldn't declare this variables right here -
they would come from somewhere else -->
<#assign varName = "myVarName"/>
<#assign varValue = "myVarValue/>
<#... set the variable .../>
So that the value can be referenced as follows:
${myVarName} <#-- prints "myVarValue" -->
In a Java directive I would use
Environment#setVariable(String name, TemplateModel model)
to achieve this. But is there a possibility to achieve this with Freemarker directly?
I had a similar problem and Special Variable Reference page helped me:
vars: Expression .vars.foo returns the same variable as expression foo. It's useful if for some reasons you have to use square bracket syntax, since that works only for hash sub variables, so you need an artificial parent hash. For example, to read a top-level variable that has a strange name that would confuse FreeMarker, you can write .vars["A strange name!"]. Or, to access a top-level variable with dynamic name given with variable varName you can write .vars[varName]. Note that the hash returned by .vars does not support ?keys and ?values.
In my case I had to use only strings in my model. I had a bunch of names like Name1, Name2, ... Name10. To make a table of these names I used this code:
<#list 1..10 as x>
<#if .vars["Name" + x]??>
<tr>
<td align="center">${.vars["Name" + x]}</td>
</tr>
</#if>
</#list>
Use a hash. That is, use the name of the variable as the key of the hash.
There's no directive that assigns to a variable that has a dynamic name. But here's a hack to achieve that:
<#'<#assign ${varName} = varValue>'?interpret />
This isn't terribly fast though. It involves FTL parsing each time it's evaluated.
I guess you can do it like this:
${myVarName?eval} <#-- prints "myVarValue" -->
I found the answer from here, and it works to me.
There could be a little misunterstanding in live templates in Intellij IDEA. I mean default values for variables in templates.
Suppose we have this live template
What I expect here, that when calling this template (type jqon and press TAB) I will see default values already typed which I can change or leave as it is. Like this
But no. I have empty strings instead of default values
Why?
I was wrong about Default value field. I don't need this in my case. I need to fill Expression field.
If I want just paste some string as default value I should put this string in quote in Expression. So now my variable settings look this way
And everything works how I want!
If you want a hardcoded string as the default value field (in the edit variables dialog), it needs to be in double quotes ("ii"). Putting a string there with no quotes (ii) does not result in an error, but also does not work.