如何将脚本部分的数据中的方法名传递给Vue上的@click?

你好,我是vuetify的新手,我试图使用这样的数据,动作是方法名。

data: () => ({
    profile: [
      { title: 'Profile', action: 'userProfile' },
      { title: 'Settings', action: 'UserSettings' },
      { divider: true },
      { title: 'Log out', action: 'userLogout' }
    ]
  }),

<app-bar-item v-else :key="item-${index}" to="/">
        <v-list-item-content>
              <v-list-item-title v-text="item.title" @click="userLogout" />
        </v-list-item-content>
</app-bar-item>

具体来说

@click="userLogout"

一些像@CLick=”item.action “这样的数据从脚本部分获得。

解决方案:

@click期待的是一个方法而不是数据。你可以做的是,添加一个中间人函数,然后将其传递给 item.action 给中间人。然后,中间人将调用预期的方法。

<v-list-item-title v-text="item.title" @click="middleman(item.action)" />

...
methods: {
  middleman(action){
    switch(action){
      case 'userProfile':
         //Go to user profile
      break;
      case 'UserSettings':
         // Go to user settings
      break;
      case 'userLogout':
         // Logout the user
      break;
    }

  }
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在3秒内显示一个容器

2022-9-8 14:51:27

未分类

Nuxt-link改变了网址,但没有改变页面内容。

2022-9-8 14:51:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索