Question

我有一个带有清单的Vue组件

<v-list-item
        v-for="(item, i) in items"
        :key="i"
>
    <v-list-item-content>
        <v-list-item-title @click="item.onClick"></v-list-item-title>
    </v-list-item-content>
</v-list-item>

我已经在methods:部分

中创建了方法

methods:{
        openProjects(){
            if (!this.loggedIn) {
                this.$router.push('/projects');
            }
        },
        logout(){
            this.$store.dispatch('auth/logout')
            if (!this.loggedIn) {
                this.$router.push('/');
            }
        },
    },

现在我想将它们与data

链接

data: () => ({
        items: [
            { onClick: openProjects },
            { onClick: logout},
        ],
    }),

当然，Vue上下文在methods中看不到data部分。那么如何链接它们呢？

Answer 1

扭转为什么不使用带有参数的方法

<v-list-item v-for="(item, i) in items" :key="i">
    <v-list-item-content>
        <v-list-item-title @click="handleItem(item)"></v-list-item-title>
    </v-list-item-content>
</v-list-item>


methods:{
    handleItem(item) {
       this.openProjects(item)
       this.logout()
    }
    openProjects(item){
        // Some logic with item
    },
    logout(){
        // Some logic
    },

Answer 2

您可以调用main方法，而不是根据单击的按钮调用不同的方法，该方法将根据传递的参数将工作委派给其他方法。

methods部分如下所示：

methods:{
    mainMethod(methodName){
        switch(methodName){
            case "openProjects":
                this.openProjects();
                break;
            case "logout":
                this.logout();
                break;
        }
    },
    openProjects(){
        if (!this.loggedIn) {
            this.$router.push('/projects');
        }
    },
    logout(){
        this.$store.dispatch('auth/logout')
        if (!this.loggedIn) {
            this.$router.push('/');
        }
    },
}

在数据部分中，将这些方法名称的数组创建为

data: () => ({
    items: ["openProjects","logout"]
})

在vue模板中，将main方法简称为@click="mainMethod(item)"

这看起来比您正在寻找的方法干净得多。

有没有一种方法可以从数据部分内的方法部分创建函数引用

2 个答案: