前提
Vuetifyの学習でサンプルの組み合わせを行っていました。
ドロップダウンを組み合わせていて以下のエラーメッセージが発生しました。
実現したいこと
- エラーメッセージの意味を理解して学習を進めたい。
発生している問題・エラーメッセージ
runtime-core.esm-bundler.js:38 [Vue warn]: v-on with no argument expects an object value. at <VOverlay ref=Ref< Proxy {…} > class="v-menu" attach=false ... > at <VMenu offset-y="" > at <VDefaultsProvider defaults= {VTabs: {…}} > at <VToolbar ref=Ref< Proxy {…} > class="v-app-bar" style= {top: '0px', zIndex: 1006, transform: 'translateY(0%)', position: 'fixed', height: undefined, …} ... > at <VAppBar prominent="" elevation=4 color="orange accent-1" > at <VApp> at <App>
該当のソースコード
Vuetify
1<template> 2 <v-app> 3 <v-app-bar prominent :elevation="4" color="orange accent-1"> 4 <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> 5 <v-toolbar-title>Vuetify</v-toolbar-title> 6 <v-spacer></v-spacer> 7 <v-menu offset-y> 8 <template v-slot:activator=" { on } "> 9 <v-btn 10 color="primary" 11 dark 12 v-on="on" 13 > 14 Dropdown 15 </v-btn> 16 </template> 17 <v-list> 18 <v-list-item 19 v-for="(item, index) in items" 20 :key="index" 21 > 22 <v-list-item-title>{{ item.title }}</v-list-item-title> 23 </v-list-item> 24 </v-list> 25 </v-menu> 26 </v-app-bar> 27 <v-navigation-drawer 28 v-model="drawer" 29 clipped 30 theme="dark" 31 color="deep-orange darken-4" 32 > 33 <v-list 34 > 35 <v-list-item 36 exact 37 v-for="(item, i) in items" 38 :key=i 39 :to=item.to 40 > 41 <v-list-item-title v-text="item.title"></v-list-item-title> 42 </v-list-item> 43 </v-list> 44 </v-navigation-drawer> 45 46 <v-main> 47 <div class="pa-3"> 48 <router-view></router-view> 49 </div> 50 </v-main> 51 52 </v-app> 53 </template> 54 55 <script setup> 56 import { ref } from 'vue' 57 58 const drawer = ref(null) 59 const items = [ 60 { 61 title: 'Home', 62 to: '/', 63 }, 64 { 65 title: 'About', 66 to: '/about', 67 }, 68 { 69 title: 'About2', 70 to: '/about2', 71 }, 72 ] 73 </script> 74 75 <style scoped> 76 html { 77 overflow: auto !important; 78 } 79 </style>
HTML
1<header class="v-toolbar v-toolbar--density-default bg-orange accent-1 elevation-4 v-theme--light v-app-bar" prominent="" data-v-27b1954b="" style="top: 0px; z-index: 1006; transform: translateY(0%); position: fixed; left: 0px; width: calc((100% - 0px) - 0px);"> 2<!----> 3<div class="v-toolbar__content" style="height: 64px;"> 4<!----> 5<!----> 6<button type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text v-app-bar-nav-icon" data-v-27b1954b=""> 7 <span class="v-btn__overlay"></span> 8 <span class="v-btn__underlay"></span> 9 <!----> 10 <span class="v-btn__content" data-no-activator=""> 11 <i class="mdi-menu mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i> 12 </span> 13 <!----> 14 <!----> 15</button> 16<div class="v-toolbar-title" data-v-27b1954b=""> 17 <div class="v-toolbar-title__placeholder"> 18 <!----> 19 Vuetify 20 </div> 21</div> 22<div class="flex-grow-1" data-v-27b1954b=""></div> 23<button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text" dark="" data-v-27b1954b=""> 24 <span class="v-btn__overlay"></span> 25 <span class="v-btn__underlay"></span> 26 <!----> 27 <span class="v-btn__content" data-no-activator=""> Dropdown </span> 28 <!----> 29 <!----> 30</button> 31<!--teleport start--> 32<!--teleport end--> 33<!----> 34</div> 35<!----> 36</header>
試したこと
{ on } を scopeDataFromVMenu に変えて
v-on = "scopeDataFromVMenu.on" に変えてみたのですが、同じエラーとなりました。
補足情報(FW/ツールのバージョンなど)
Vue3 の Laravelsail 環境下で VITEv4.0.3で動かしています。
01/01 18:23-追記
開発者ツールで要素を調べてみた所
となっていて、
そもそもonclickで表示すべき部分が読み込まれていないようです。
viteの方では特にエラーなどでていないのですが
v-listが何らかの原因で読み飛ばされていると考えて良いのでしょうか?

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/01/03 10:47