Vue.js interpolation values sum - vue.js

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.

Related

What is the correct way to use multiple variables in a Text element?

I can't seem to find the "correct" way to use multiple variables in a React Native Text element.
I have the users first, and the last name as separate object values and I want to show them in the same Text element.
<Text>{props.user.firstName} {props.user.lastName}</Text>
This works fine, but ESLint doesn't like it. (jsx-one-expression-per-line).
If I put them on separate lines, then I can't figure out where to put the empty space in between first and last name.
<Text>
{props.user.firstName}
{props.user.lastName}
</Text>
There's an empty space after {props.user.firstName}, but ESLint doesn't like that either (no-trailing-spaces).
So I'm asking whether there is a correct way to achieve the result that I want without changing ESLint configuration or creating a separate variable.
You're looking for template literals.
You can nest your variables like so:
<Text>`${props.user.firstName} ${props.user.lastName}`</Text>

Build XPath using wildcard for changing strings

I am trying to build an XPath for a property that is constantly changing. The number prefix is bound to change sometimes.
Original:
//*[#id="MainContent_DXEditor3_I"]
which I can query using
$x('//*[#id="MainContent_DXEditor3_I"]
Intended use: I would like to build the string to handle any number in the sub-string. Example: if the property changes to 'MainContent_DXEditor33_I' or 'MainContent_DXEditor8_IXYZ' - I still want to be able to find the element without having to rebuild
You can try to relax the predicate by using starts-with() :
//*[#starts-with(#id, "MainContent_DXEditor")]
You should try to identify a unique parent of the element or save xpath as a string that contains a variable.
These are the 2 possible solutions.
A general selector will return multiple elements, if you identify a unique parent then you are closer and after that you can select any first, second.. last if you have a list.

How to append hash tables in velocity template?

I tried to append two hash tables in velocity.
#foreach($dun1 in $dotcontent.pull("+structureName:Checnas +(conhost:fe1d98e8-9699-4f3f-abf5-a6c0afc8ab47 conhost:SYSTEM_HOST)",10,"modDate desc"))
#set($foo={
$!{dun1.mname}:$!{dun1.subname}
})
#end
In the above for each loop I am pulling content from structure "Checnas".
But at the end we can get only the last value in the content.To solve that we need to append for every iteration.I need syntax for appending hash tables.
Please help me to solve this.
Your code currently is over writing $foo each time and hence you are just getting the last value. You can use lists in velocity to achieve this.
This might work:
#set($listOfMnames=[])
#set($listOfSubNames=[])
#foreach($dun1 in $dotcontent.pull("+structureName:Checnas +(conhost:fe1d98e8-9699-4f3f-abf5-a6c0afc8ab47 conhost:SYSTEM_HOST)",10,"modDate desc"))
#set($foo=$listOfMnames.add($!{dun1.mname}))
#set($foo=$listOfSubNames.add($!{dun1.subname}))
#end
This way, you will end up with two lists 'listOfMnames' and 'listOfSubNames', both fully populated. You can later iterate through them to print/utilise their values.
This link will be helpful and tell you the purpose of using $foo which is not being used and just being assigned.
Alternatively, you can also use velocity maps with proper key/val pairs but be sure to declare it before the loop begins.

String Template: is it possible to get the n-th element of a Java List in the template?

In String Template one can easily get an element of a Java Map within the template.
Is it possible to get the n-th element of an array in a similar way?
According to the String Template Cheat Sheet you can easily get the first or second element:
You can combine operations to say things like first(rest(names)) to get second element.
but it doesn't seem possible to get the n-th element easily. I usually transform my list into a map with list indexes as keys and do something like
map.("25")
Is there some easier/more straightforward way?
Sorry, there is no mechanism to get a[i].
There is no easy way getting n-th element of the list.
In my opinion this indicates that your view and business logic are not separated enough: knowledge of what magic number 25 means is spread in both tiers.
One possible solution might be converting list of values to object which provides meaning to the elements. For example, lets say list of String represents address lines, in which case instead of map.("3") you would write address.street.

XAML: Batch define elements of a column in a Grid

When defining the contents of a Grid, I first define all row and column definitions, then afterwards when defining elements I have to explicitly specify which row and column they belong to. Not only is it tedious, but if I add an element somewhere between the others I have to manually shift the index of everything that follows. So I wondered if it was possible to batch-define elements within a column or row, for example something like
<Column.Content Index="0">
<Label>First row</Label>
<Label>Second row</Label>
<Label>Third row</Label>
</Column.Content>
..or similar? Something like how the <table> HTML tag works would also be awesome.
Given your problem I think you should give in to the magic of databinding and let WPF do the hard work of moving data around if new data is inserted: have a look here http://social.msdn.microsoft.com/Forums/is/wpf/thread/2f5173fd-a9ef-4a5b-9fa8-b68e4255dac4