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/

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

1 个答案: