Vuetifyのドロップダウンメニューでの v-on with no argument expects an object value. エラー

前提

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件

自己解決

vuetify3の最新バージョンでは何をやっても表示できなく
仕方なくバージョンを2に下げることで対応いたしました。
同じ状況の方に向けてバージョンダウンのデータを記載します。

tree
1.
2├resources┬css─app.css
3│         ├js┬components┬404.vue
4│         │  ├app.js    ├App.vue
5│         │  └router.js └Home.vue
6│         ├src─sass┬app.sass
7│         │         └app.scss
8│         └views─app.blade.php
9├routes─web.php
10├.env
11├docker-compose.yml
12├vite.config.js
13└vue.config.js

env
1APP_NAME=Laravel
2APP_ENV=local
3APP_KEY=base64:XXXXXXXXXXXXXXXXXXXXXXXXXXXX
4APP_DEBUG=true
5APP_URL=http://localhost
6APP_SERVICE=laravelvuetify
7WWWUSER=1000
8WWWGROUP=1000
9
10LOG_CHANNEL=stack
11LOG_DEPRECATIONS_CHANNEL=null
12LOG_LEVEL=debug
13
14DB_CONNECTION=pgsql
15DB_HOST=pgsql
16DB_PORT=5432
17DB_DATABASE=sailvuetify2
18DB_USERNAME=sail
19DB_PASSWORD=password
20
21BROADCAST_DRIVER=log
22CACHE_DRIVER=file
23FILESYSTEM_DISK=local
24QUEUE_CONNECTION=sync
25SESSION_DRIVER=file
26SESSION_LIFETIME=120
27
28MEMCACHED_HOST=memcached
29
30REDIS_HOST=redis
31REDIS_PASSWORD=null
32REDIS_PORT=6379
33
34MAIL_MAILER=smtp
35MAIL_HOST=mailhog
36MAIL_PORT=1025
37MAIL_USERNAME=null
38MAIL_PASSWORD=null
39MAIL_ENCRYPTION=null
40MAIL_FROM_ADDRESS="hello@example.com"
41MAIL_FROM_NAME="${APP_NAME}"
42
43AWS_ACCESS_KEY_ID=
44AWS_SECRET_ACCESS_KEY=
45AWS_DEFAULT_REGION=us-east-1
46AWS_BUCKET=
47AWS_USE_PATH_STYLE_ENDPOINT=false
48
49PUSHER_APP_ID=
50PUSHER_APP_KEY=
51PUSHER_APP_SECRET=
52PUSHER_HOST=
53PUSHER_PORT=443
54PUSHER_SCHEME=https
55PUSHER_APP_CLUSTER=mt1
56
57VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
58VITE_PUSHER_HOST="${PUSHER_HOST}"
59VITE_PUSHER_PORT="${PUSHER_PORT}"
60VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
61VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

投稿2023/01/03 10:46

can1980

総合スコア17

回答へのコメント

can1980

2023/01/03 10:47

```docker-comose.yml # For more information: https://laravel.com/docs/sail version: '3' services: laravelvuetify: build: context: ./vendor/laravel/sail/runtimes/8.1 dockerfile: Dockerfile args: WWWGROUP: '${WWWGROUP}' image: sail-8.1/app extra_hosts: - 'host.docker.internal:host-gateway' ports: - '${APP_PORT:-80}:80' - '${VITE_PORT:-5173}:${VITE_PORT:-5173}' environment: WWWUSER: '${WWWUSER}' LARAVEL_SAIL: 1 XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}' XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}' volumes: - '.:/var/www/html' networks: - sail depends_on: - pgsql - mailhog pgsql: image: 'postgres:14' ports: - '${FORWARD_DB_PORT:-5432}:5432' environment: PGPASSWORD: '${DB_PASSWORD:-secret}' POSTGRES_DB: '${DB_DATABASE}' POSTGRES_USER: '${DB_USERNAME}' POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}' volumes: - 'sail-pgsql:/var/lib/postgresql/data' - './vendor/laravel/sail/database/pgsql/create-testing-database.sql:/docker-entrypoint-initdb.d/10-create-testing-database.sql' networks: - sail healthcheck: test: ["CMD", "pg_isready", "-q", "-d", "${DB_DATABASE}", "-U", "${DB_USERNAME}"] retries: 3 timeout: 5s mailhog: image: 'mailhog/mailhog:latest' ports: - '${FORWARD_MAILHOG_PORT:-1025}:1025' - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025' networks: - sail networks: sail: driver: bridge volumes: sail-pgsql: driver: local ``` ```npm html@1.0.0 /var/www/html +-- -@0.0.1 +-- @mdi/font@7.1.96 +-- @mdi/js@7.1.96 +-- @vitejs/plugin-vue2@2.2.0 +-- asynckit@0.4.0 +-- axios@1.2.2 +-- babel-eslint@10.1.0 +-- bootstrap-vue@2.23.1 +-- bootstrap@4.6.2 +-- combined-stream@1.0.8 +-- deepmerge@4.2.2 +-- delayed-stream@1.0.0 +-- esbuild@0.16.12 +-- eslint-config-prettier@8.6.0 +-- eslint-plugin-prettier@4.2.1 +-- eslint@8.31.0 +-- follow-redirects@1.15.2 +-- form-data@4.0.0 +-- function-bind@1.1.1 +-- has@1.0.3 +-- is-core-module@2.11.0 +-- jsdom@20.0.3 +-- laravel-vite-plugin@0.7.3 +-- lodash@4.17.21 +-- mime-db@1.52.0 +-- mime-types@2.1.35 +-- nanoid@3.3.4 +-- path-parse@1.0.7 +-- picocolors@1.0.0 +-- picomatch@2.3.1 +-- postcss@8.4.20 +-- prettier@2.8.1 +-- proxy-from-env@1.1.0 +-- resolve@1.22.1 +-- rollup-plugin-visualizer@5.9.0 +-- rollup@3.9.0 +-- sass-loader@7.3.1 +-- sass@1.32.8 +-- source-map-js@1.0.2 +-- supports-preserve-symlinks-flag@1.0.0 +-- unplugin-vue-components@0.22.12 +-- vite-plugin-checker@0.5.3 +-- vite-plugin-compression@0.5.1 +-- vite-plugin-full-reload@1.0.5 +-- vite-plugin-vue2@2.0.3 +-- vite@4.0.3 +-- vitest@0.26.2 +-- vue-router@3.6.5 +-- vue-scrollto@2.20.0 +-- vue-template-compiler@2.6.14 +-- vue-tsc@1.0.19 +-- vue@2.7.14 `-- vuetify@2.6.13 ``` ```vue.config.js module.exports = { publicPath: './', css: { loaderOptions: { sass: { prependData: `@import "@/sass/app.sass"` }, scss: { prependData: `@import "@/sass/app.scss";` } } }, transpileDependencies: ['vuetify'] } ``` ```vite.config.js import { defineConfig } from 'vite'; import viteCompression from 'vite-plugin-compression'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue2' import { visualizer } from 'rollup-plugin-visualizer'; import Components from "unplugin-vue-components/vite"; import { VuetifyResolver } from "unplugin-vue-components/resolvers"; import path from "path"; export default defineConfig({ define: { 'process.env': {} }, resolve: { alias: { '@': path.join(__dirname, './resources/src'), '~': path.join(__dirname, './node_modules'), //'$': path.join(__dirname, './'), 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['.js', '.vue', '.json', '.css', '.node'] }, css: { postcss: { plugins: [ // Fix vite build includes @charset problem { postcssPlugin: 'internal:charset-removal', AtRule: { charset: atRule => { if (atRule.name === 'charset') { atRule.remove(); } }, }, }, ], }, }, // Build Options build: { // Build Target target: 'esnext', // Rollup Options rollupOptions: { // @ts-ignore output: { manualChunks: { // Split external library from transpiled code. vue: [ 'vue', 'vue-router', 'vue-router/composables', 'vuex', 'vuex-persist', 'deepmerge', '@logue/vue2-helpers', '@logue/vue2-helpers/teleport', '@logue/vue2-helpers/vue-router', '@logue/vue2-helpers/vuex', ], vuetify: [ 'vuetify/lib', '@logue/vue2-helpers/vuetify', 'webfontloader', ], materialdesignicons: ['@mdi/font/css/materialdesignicons.css'], }, plugins: [ visualizer({ open: true, filename: 'dist/stats.html', }) ], }, }, // Minify option minify: 'esbuild', }, plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), vue(), viteCompression(), Components({ resolvers: [VuetifyResolver()], }), ], server: { hmr: { host: 'localhost', }, }, base: "./" }); ``` ```app.js import "./bootstrap"; import Vue from "vue"; import App from "./components/App.vue"; import Vuetify from "vuetify"; import axios from "axios"; import "@mdi/font/css/materialdesignicons.css"; import VueScrollTo from "vue-scrollto"; import router from "./router"; import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; Vue.use(BootstrapVue); Vue.use(IconsPlugin); Vue.http = Vue.prototype.$http = axios; Vue.config.productionTip = false; Vue.use(Vuetify); Vue.use(VueScrollTo, { offset: -60, }); const app = new Vue({ el: "#app", router, components: { App }, vuetify: new Vuetify(), render: h => h('router-view'), render: h => h(App), }); console.log(app) ``` ```router.js import Vue from "vue"; import VueRouter from "vue-router"; import VueScrollTo from "vue-scrollto"; import Home from "./components/Home.vue"; import NotFound from "./components/404.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/404", name: "404-NotFound", component: NotFound, }, { path: "/:pathMatch(.*)", redirect: "/404", }, ]; const router = new VueRouter({ mode: "history", base: "/app", routes, scrollBehavior(to, from, savedPosition) { if (to.hash) { VueScrollTo.scrollTo(to.hash) return {} } else if (savedPosition) { return savedPosition } else { VueScrollTo.scrollTo('#app') return {} } }, }); export default router; ``` ```app.blade.php <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title>  <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">  @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <div id="app"></div> </body> </html> ``` ```App.vue <template> <v-app id="app">  <v-main> <div class="pa-3"> <router-view></router-view> </div> </v-main> </v-app> </template> <script> export default { name: 'app', data: () => ({ }), } </script> <style scoped> html { overflow: auto !important; } </style> ```