I posted this to my buddy earlier in slack. Background: We are both really interested in working in Elixir (which pattern matching and piping are kinda important concepts) and I currently work as a UI dev [we are transitioning from knockoutjs to vuejs] :
I pushed this bit of code earlier today. In Elixir, its called piping. Here it is :
Code:
<div class="list-name">{{ audience.name | truncate}}</div>
Basically, what this says is
Quote:
pipe the return value of audience.name into truncate
Quote:
since audience.name is not a method its literally then just pipe the value of audience.name as the first argument of truncate.
But... you need to declare that truncate method as a 'filter' in vuejs in order to be able to use that special piping syntax. Truncate method is very simple method (written by me ldo)
Code:
truncate = (str, maxLength = 25) => {
return str && str.length > maxLength ? str.slice(0, maxLength) + '...' : str
}
Through the magic of ES6, we now get default arguments. If no second argument exists, the string gets a max length of 25 and gets truncated if its 26 characters or longer.
So anyway back to the question. Do you prefer the html markup I posted to you or...
Code:
<div class="list-name">{{ truncate(audience.name)}}</div>
In this example, we can simply declare it as a method in the vue model. Its simpler and easier to grasp for js noobs.
Which do you prefer (and why ldo)?