I have my vue instance:

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

Is it possible to call my method testOne/testTwo which I pass to shares array like this:

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

I have my vue instance:

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

Is it possible to call my method testOne/testTwo which I pass to shares array like this:

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

• javascript
• vue.js

Share Improve this question Follow edited Nov 28, 2018 at 8:41 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Nov 28, 2018 at 8:35 KinectUserKinectUser 3122 gold badges22 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Yes, it is possible. Instead of calling the function inside each share, just pass the reference to it. You need to use this. as those are instance functions.

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

Also, data property should be a Function that returns object (the actual data) and it's a good practice to add that property onto the top of your Vue ponent.

Fiddle: http://jsfiddle/vnef5d4c/11/