How to call a function with argument in VueJS? - vue.js

Question

Looking at the Vue Documentation, I can't understand how to call a function with arguments in Vue, using data already in the template.
For example,
JavaScript
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reverse: function (word) {
return word.split('').reverse().join('');
}
}
})
HTML
<div id="example">
<p> {{ message }} </p>
<p> {{ reverse( {{ message }} ) }} </p>
</div>
I know the HTML is wrong, but this is similar to what I'm looking to achieve.

Answer 1

Code between {{ }} is interpreted as javascript, so you can pass the variable directly to the function:
<p> {{ reverse(message) }} </p>

Answer 2

#Jerodev answer is correct, and it's what you were looking for.
However, for the code snippet you pasted, a computed property is the way to go:
JS:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reverse(){
return this.message.split('').reverse().join('');
}
}
})
HTML:
<div id="example">
<p> {{ message }} </p>
<p> {{ reverse }} </p>
</div>
In this way, the code is more performant, because the expression is cached, and arguably more clear, since you don't need to call the method with the argument in the html.

Answer 3

If you like typescript, you can write it like this
import { Vue, Component } from 'vue-property-decorator';
#Component({name: 'test-component'})
export default class TestComponent extends Vue {
private message: string = 'Hello';
get reverse(): string {
return this.message.split('').reverse().join('');
}
}
And in your template
<div id="example">
<p> {{ message }} </p>
<p> {{ reverse }} </p>
</div>