質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

受付中

Laravel9+vite環境下でのVue-routerによるグラフページ表示の実現

SSM-105
SSM-105

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0回答

0グッド

1クリップ

169閲覧

投稿2023/02/04 07:05

実現したいこと

・Laravel9+viteの環境下で、vue-routerを用いてSPA様式のグラフページを作成したい。

前提

お世話になっております。どう調べても解決できなかったため、質問をさせていただきます。
Laravel8+MIXの環境でvue-routerとvue-chartjs、Chart.jsを用いてのSPA様式のグラフページアプリを一旦開発しました。
しかし、Laravelが最新版に更新されたとのことだったので、Laravel9+viteの環境に移植しようとしたところ、以下のエラーメッセージが発生しました。
コードについてはLaravel8+MIX環境で製作したものをそのままコピペで用いました。

発生している問題・エラーメッセージ

下記のエラーと警告が発生し、ページにvueが読み込まれませんでした

警告1

runtime-core.esm-bundler.js:40 [Vue warn]: Missing required prop: "data" at <Line chart-data= {} > at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

警告2

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Object, got Undefined at <Anonymous ref=fn<reforwardRef> type="line" options= {} ... > at <Line chart-data= {} > at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

警告3

runtime-core.esm-bundler.js:40 [Vue warn]: Unhandled error during execution of mounted hook at <Anonymous ref=fn<reforwardRef> type="line" options= {} ... > at <Line chart-data= {} > at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {fillData: ƒ, …} > > at <RouterView> at <App>

エラーメッセージ

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'labels') at cloneData (utils.ts:96:28) at renderChart (chart.ts:35:26) at runtime-core.esm-bundler.js:2757:40 at callWithErrorHandling (runtime-core.esm-bundler.js:173:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2731:29) at flushPostFlushCbs (runtime-core.esm-bundler.js:359:46) at flushJobs (runtime-core.esm-bundler.js:413:9)

該当のソースコード app.js

javascript

1import './bootstrap'; 2import router from './router'; 3import { createApp } from 'vue/dist/vue.esm-bundler.js'; 4import App from "./components/App.vue"; 5 6 7const app = createApp({App}) 8 app.use(router); 9 app.mount("#app"); 10

router.js

javascript

1import {createRouter,createWebHashHistory} from 'vue-router'; 2import Graph from "./components/graph.vue"; 3import Bar from "./components/graph_bar.vue"; 4import Pie from "./components/graph_pie.vue"; 5 6const routes = [ 7 { path: '/', name:'graph',component: Graph}, 8 { path: '/Bar', name:'bar',component: Bar }, 9 { path: '/Pie', name:'pie',component: Pie }, 10] 11 12const router = createRouter({ 13 mode:'history', 14 history: createWebHashHistory(), 15 routes, 16}) 17 18 19export default router; 20

vueファイル graph.vue
apiからのデータを受け取るため、axiosを用いています。

vue

1<template> 2 <Line :chart-data="chartData" /> 3</template> 4 5<script> 6// DataPage.vue 7import { 8 Line } from 'vue-chartjs' 9import { 10 Chart as ChartJS, 11 Title, 12 Tooltip, 13 Legend, 14 LineElement, 15 LinearScale, 16 PointElement, 17 CategoryScale, 18 } from 'chart.js' 19 20ChartJS.register(Title,Tooltip,Legend,LineElement,LinearScale,PointElement,CategoryScale) 21 22export default { 23 name: 'LineChart', 24 components: { 25 Line 26 }, 27 28 data(){ 29 return{ 30 chartData:{}, 31 loaded:false, 32 food_amount:0, 33 food_dates:0, 34 }; 35 }, 36 mounted() { 37 this.fillData(); 38 }, 39 watch() { 40 this.fillData(); 41 }, 42 methods: { 43 fillData(){ 44 axios.get('/api/kakeiboes').then(response =>{ 45 this.data=response.data.data; 46 const food_purposes='食費'; 47 const food_target = this.data.filter(v => v.purpose === food_purposes); 48 this.food_amount=food_target.map(item=>item["amount"]); 49 this.food_dates=food_target.map(item=>item["dates"]); 50 51 this.chartData={ 52 labels: this.food_dates, 53 datasets: [ 54 { 55 label: 'Data One', 56 backgroundColor: '#f87979', 57 data: this.food_amount 58 } 59 ] 60 } 61 62 }) 63 } 64 } 65} 66</script> 67

ビューを表示するbladeファイル graph.blade.php

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset =" UTF-8"/> 5 <title>家計簿</title> 6 <link rel =" stylesheet" href =" https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> 7 <link href="{{asset('css/base.css')}}" rel="stylesheet"> 8 <link href="{{asset('css/input.css')}}" rel="stylesheet"> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 @vite(['resources/css/app.css', 'resources/js/app.js']) 11 </head> 12 13 <body> 14 <!--各遷移ボタンのサイドブロックを生成--> 15 <div class="container-fulid"> 16 <div class="row"> 17 <div class="col-2 buttons"> 18 <p><button type="button" class="movebutton" onclick="location.href='{{route('home')}}'">ホーム画面</button></p> 19 <p><button type="button" class="movebutton" onclick="location.href='{{route('input')}}'">出費入力画面</button></p> 20 <p><button type="button" class="movebutton" onclick="location.href='{{route('payment')}}'">口座降金入力画面</button></p> 21 <p><button type="button" class="movebutton" onclick="location.href='{{route('payment')}}'">入金入力画面</button></p> 22 <p><button type="button" class="movebutton" onclick="location.href='{{route('graph')}}'">グラフ画面</button></p> 23 <p><button type="button" class="movebutton" onclick="location.href='{{route('history')}}'">履歴画面</button></p> 24 </div> 25 <div class="col-5"> 26 <div id="app"> 27 <div id="nav"> 28 <router-link to="/">Line</router-link> 29 <router-link to="/Bar">Bar</router-link> 30 <router-link to="/Pie">Pie</router-link> 31 </div> 32 <router-view/> 33 </div> 34 </div> 35 </div> 36 </div>

viteの設定ファイル vite.config.js

javascript

1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3import vue from '@vitejs/plugin-vue'; 4 5 6export default defineConfig({ 7 plugins: [ 8 vue(), 9 laravel({ 10 input: ['resources/css/app.css', 'resources/js/app.js'], 11 refresh: true, 12 }), 13 ], 14}); 15

package.json

{ "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "axios": "^1.1.2", "chart.js": "^4.2.0", "laravel-vite-plugin": "^0.7.2", "lodash": "^4.17.19", "postcss": "^8.1.14", "vite": "^4.0.0", "vue-chartjs": "^5.2.0" }, "dependencies": { "chart.js": "^4.2.0", "type": "^2.7.2", "vue-chartjs": "^5.2.0", "vue-cli": "^2.9.6", "vue-router": "^4.1.6" } }

試したこと

最初にコピペした時点ではまだMIXの形式をそのまま使っていたため、

<script src="{{ mix('js/app.js') }}"></script>

と記載されていた部分を

@vite(['resources/css/app.css', 'resources/js/app.js'])

に変更しましたが、エラーは消えませんでした。
app.jsに問題があるのかと考え、色々な項目について削除したりなどを試したのですが、

app.use(router);

を消した場合のみ、エラーが発生しない状況になりましたが、どういったことが原因なのかはわかりませんでした。
現状、自分ではどうすれば解決できるのか皆目見当がつかない状態であります。
拙い質問とは思いますが、皆様のお知恵をお貸し願えればと存じます。よろしくお願いいたします。

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

VScode 1.75.0
Laravel 9.50.1
PHP 8.14

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。