Vue.js 如何使用v-for将单击事件分配给v-list-item？

我想使用Vue.js v-for将单击事件分配给v-list-item。 代码如下：

{{item.title}
导出默认值{
数据：（）=>({
项目：[
{
标题：“标题1”，
图标：“mdi播放框多个”，
操作：“注销”
},
{标题：“标题2”，
图标：“mdi注销”，
操作：“注销”}
]
}),
方法：{
注销（）{
警报（'注销！'）；
},
}
}

我想给@click分配一个项目操作。 以下各项将正常工作

{{item.title}

---

请告诉我如何操作。

在您的项目中，您需要将

操作

引用到

注销

方法，否则您将单击事件绑定到字符串：

项目：[
{
标题：“标题1”，
图标：“mdi播放框多个”，
操作：this.logout//this.logout改为“logout”
},
{标题：“标题2”，
图标：“mdi注销”，
操作：this.logout}
]

在您的项目中，您需要将

操作

引用到

注销

方法，否则您将单击事件绑定到字符串：

项目：[
{
标题：“标题1”，
图标：“mdi播放框多个”，
操作：this.logout//this.logout改为“logout”
},
{标题：“标题2”，
图标：“mdi注销”，
操作：this.logout}
]

我不能用我教的方式做这件事。 最终实现如下

<v-list-item-group>
  <v-list-item v-for="(item, index) in items" :key="index" @click="menuActionClick(item.action)">
    <v-list-item-icon>
      <v-icon dark color="#7E6990" v-text="item.icon"></v-icon>
    </v-list-item-icon>
    <v-list-item-title>{{ item.title }}</v-list-item-title>
  </v-list-item>
</v-list-item-group>

<script>
export default {
  data: () => ({
    items: [
      {
        title: "title1",
        icon: "mdi-play-box-multiple",
        action: "test"
      },
      { title: "title2", 
        icon: "mdi-logout", 
        action: "logout" }
    ]
  }),
  methods: {
    menuActionClick(action) {
      if (action === "test") {
        alert('TEST!!')
      } else if (action === "logout") {
        alert('LOGOUT!!')
      }
    }
  }
}
</script>

{{item.title}
导出默认值{
数据：（）=>({
项目：[
{
标题：“标题1”，
图标：“mdi播放框多个”，
行动：“测试”
},
{标题：“标题2”，
图标：“mdi注销”，
操作：“注销”}
]
}),
方法：{
菜单操作单击（操作）{
如果（操作==“测试”）{
警报（'TEST！！'）
}否则如果（操作==“注销”）{
警报（'注销！！'）
}
}
}
}

我不能用我教的方式做这件事。 最终实现如下

<v-list-item-group>
  <v-list-item v-for="(item, index) in items" :key="index" @click="menuActionClick(item.action)">
    <v-list-item-icon>
      <v-icon dark color="#7E6990" v-text="item.icon"></v-icon>
    </v-list-item-icon>
    <v-list-item-title>{{ item.title }}</v-list-item-title>
  </v-list-item>
</v-list-item-group>

<script>
export default {
  data: () => ({
    items: [
      {
        title: "title1",
        icon: "mdi-play-box-multiple",
        action: "test"
      },
      { title: "title2", 
        icon: "mdi-logout", 
        action: "logout" }
    ]
  }),
  methods: {
    menuActionClick(action) {
      if (action === "test") {
        alert('TEST!!')
      } else if (action === "logout") {
        alert('LOGOUT!!')
      }
    }
  }
}
</script>

{{item.title}
导出默认值{
数据：（）=>({
项目：[
{
标题：“标题1”，
图标：“mdi播放框多个”，
行动：“测试”
},
{标题：“标题2”，
图标：“mdi注销”，
操作：“注销”}
]
}),
方法：{
菜单操作单击（操作）{
如果（操作==“测试”）{
警报（'TEST！！'）
}否则如果（操作==“注销”）{
警报（'注销！！'）
}
}
}
}