如何从Vue.js中的模板调用方法？

Question

我有我的Vue实例：

var testOptions = new Vue({
    el: '#testOptions',
    methods: {
        getURL: function () {
            return (window.location.href);
        },
        testOne: function () {
            console.log('!!');
        },
        testTwo: function () {
            console.log('!!!!');
        }
    },
    data: {
        shares: [
            { text: 'testOne', icon: 'ico_test1.svg',func: testOne() },
            { text: 'testTwo', icon: 'ico_test2.svg', func: testTwo() },
        ]
    }
});

是否可以叫我的方法testOne / testTwo我传给shares数组是这样的：

<li v-on:click="share.func" class="test-options__option">
    {{share.text}}
</li>

Answer 1

对的，这是可能的。 无需在每个共享内部调用函数，只需将引用传递给它。 您需要使用this. 因为这些是实例函数。

shares: [
    { text: 'testOne' icon: 'ico_test1.svg', func: this.testOne },
    { text: 'testTwo' icon: 'ico_test2.svg', func: this.testTwo },
]

另外， data属性应该是一个返回对象（实际数据）的Function ，这是将该属性添加到Vue组件顶部的一种好习惯。

小提琴： http : //jsfiddle.net/vnef5d4c/11/