Как вызвать функцию с аргументом в VueJS?

Question

Глядя на документацию Vue, я не могу понять, как вызвать функцию с аргументами в Vue, используя данные, уже содержащиеся в шаблоне.

Например,

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>

Я знаю, что HTML неверен, но это похоже на то, чего я добиваюсь.

Answer 1

@ Jerodev ответ правильный, и это то, что вы искали.

Однако для вставленного вами фрагмента кода вычисляемое свойство - это путь:

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>

Таким образом, код становится более производительным, потому что выражение кэшируется и, возможно, более понятным, так как вы ненеобходимо вызвать метод с аргументом в html.

Answer 2

Если вам нравится машинопись, вы можете написать ее так:

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('');
   }
}

И в своем шаблоне

<div id="example">
    <p> {{ message }} </p>
    <p> {{ reverse }} </p>
</div>

Answer 3

Код между {{ }} интерпретируется как javascript, поэтому вы можете передать переменную непосредственно в функцию:

<p> {{ reverse(message) }} </p>