Vue.js v-forを使用して、クリックイベントをv-list-itemに割り当てたいと思います。コードは次のとおりです。
<v-list-item-group>
<v-list-item v-for="(item, index) in items" :key="index" @click="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: "logout"
},
{ title: "title2",
icon: "mdi-logout",
action: "logout" }
]
}),
methods: {
logout() {
alert('logout!');
},
}
}
</script>
アイテムのアクションを@clickに割り当てたい。以下は正しく動作します。
<v-list-item-group class="user-menu">
<v-list-item v-for="(item, index) in items" :key="index" @click="logout">
<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>
方法を教えてください。
私が教えたようにそれをすることができませんでした。最終的には次のように実装されます。
<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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加