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

Question

前提

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>

該当のソースコード

<template>
	<v-app>
	  <v-app-bar prominent :elevation="4" color="orange accent-1">
			<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
			<v-toolbar-title>Vuetify</v-toolbar-title>
			<v-spacer></v-spacer>
			<v-menu offset-y>
				<template v-slot:activator=" { on } ">
					<v-btn
						color="primary"
						dark
						v-on="on"
					>
						Dropdown
					</v-btn>
				</template>
				<v-list>
					<v-list-item
						v-for="(item, index) in items"
						:key="index"
					>
						<v-list-item-title>{{ item.title }}</v-list-item-title>
					</v-list-item>
				</v-list>
			</v-menu>
	  </v-app-bar>
	  <v-navigation-drawer
		v-model="drawer"
		clipped
		theme="dark"
		color="deep-orange darken-4"
	  >
		<v-list
		>
		  <v-list-item
			exact
			v-for="(item, i) in items"
			:key=i
			:to=item.to
		  >
			<v-list-item-title v-text="item.title"></v-list-item-title>
		  </v-list-item>
		</v-list>
	  </v-navigation-drawer>
	
	  <v-main>
		<div class="pa-3">
		  <router-view></router-view>
		</div>
	  </v-main>
	
	</v-app>
	</template>
	
	<script setup>
	  import { ref } from 'vue'
	
	  const drawer = ref(null)
	  const items = [
		{
		  title: 'Home',
		  to: '/',
		},
		{
		  title: 'About',
		  to: '/about',
		},
		{
		  title: 'About2',
		  to: '/about2',
		},
	  ]
	</script>
	
	<style scoped>
	html {
	  overflow: auto !important;
	}
	</style>

<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);">
<!---->
<div class="v-toolbar__content" style="height: 64px;">
<!---->
<!---->
<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="">
	<span class="v-btn__overlay"></span>
	<span class="v-btn__underlay"></span>
	<!---->
	<span class="v-btn__content" data-no-activator="">
		<i class="mdi-menu mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
	</span>
	<!---->
	<!---->
</button>
<div class="v-toolbar-title" data-v-27b1954b="">
	<div class="v-toolbar-title__placeholder">
	<!---->
	Vuetify
	</div>
</div>
<div class="flex-grow-1" data-v-27b1954b=""></div>
<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="">
	<span class="v-btn__overlay"></span>
	<span class="v-btn__underlay"></span>
	<!---->
	<span class="v-btn__content" data-no-activator=""> Dropdown </span>
	<!---->
	<!---->
</button>
<!--teleport start-->
<!--teleport end-->
<!---->
</div>
<!---->
</header>

試したこと

{ on } を scopeDataFromVMenu に変えて
v-on = "scopeDataFromVMenu.on" に変えてみたのですが、同じエラーとなりました。

補足情報（FW/ツールのバージョンなど）

Vue3 の Laravelsail 環境下で VITEv4.0.3で動かしています。

01/01 18:23-追記
開発者ツールで要素を調べてみた所

<!--teleport start--> <!--teleport end-->

となっていて、
そもそもonclickで表示すべき部分が読み込まれていないようです。
viteの方では特にエラーなどでていないのですが
v-listが何らかの原因で読み飛ばされていると考えて良いのでしょうか？

Answer 1

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

.
├resources┬css─app.css
│         ├js┬components┬404.vue
│         │  ├app.js    ├App.vue
│         │  └router.js └Home.vue
│         ├src─sass┬app.sass
│         │         └app.scss
│         └views─app.blade.php
├routes─web.php
├.env
├docker-compose.yml
├vite.config.js
└vue.config.js

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:XXXXXXXXXXXXXXXXXXXXXXXXXXXX
APP_DEBUG=true
APP_URL=http://localhost
APP_SERVICE=laravelvuetify
WWWUSER=1000
WWWGROUP=1000

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=pgsql
DB_HOST=pgsql
DB_PORT=5432
DB_DATABASE=sailvuetify2
DB_USERNAME=sail
DB_PASSWORD=password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=memcached

REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[e-mail]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Comments

[can1980]

```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">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
```
```App.vue
<template>
<v-app id="app">
<!-- Include header page link -->

<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>
```