hana00033 score 17
2019/11/27 00:13 投稿
| Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう |
| ### 前提・実現したいこと |
| Vue.jsでv-calendarを使って日付選択フォームを作成したいです。 |
| https://www.kabanoki.net/3905/ |
| を参考に作成しようとしています。 |
| ### 発生している問題・エラーメッセージ |
| npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため |
| 正しくプロジェクトにパッケージがインストールされているかを確認するために、 |
| ``` |
| npm list v-calendar |
| ``` |
| を実行したところ |
| ``` |
| taskcapsule@0.1.0 /Users/ |
| taskcapsule@0.1.0 /Users/usename/Desktop/taskcapsule |
| └── UNMET DEPENDENCY v-calendar@1.0.0-beta.22 |
| npm ERR! missing: v-calendar@1.0.0-beta.22, required by taskcapsule@0.1.0 |
| ``` |
| と出ました。なので、 |
| ``` |
| npm install v-calendar@1.0.0-beta.22 |
| ``` |
| を行ったところパッケージは確認できたのですが、 |
| グーグルの検証の画面では下記のエラーが出てしまいます。 |
| ``` |
| Uncaught ReferenceError: Vue is not defined |
| at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue:9) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue?8ebb:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/components/about.vue (about.vue:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/router/router.js (router.js:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/todo.js (todo.js:1) |
| at __webpack_require__ (bootstrap:19) |
| ``` |
| ###ソースコード |
| 実際に日付選択フォームを作成しているコンポーネントのvueファイルの中身です。 |
| ``` |
| <template> |
| <v-date-picker :mode="mode" |
| :formats="formats" |
| v-model="selectedDate"></v-date-picker> |
| </template> |
| <script> |
| import VCalendar from 'v-calendar'; |
| Vue.use(VCalendar); |
| Vue.config.productionTip = false |
| export default { |
| data: function(){ |
| return{ |
| mode: 'single', |
| formats: { |
| input: ['YYYY-MM-DD'], |
| }, |
| selectedDate: null, |
| } |
| } |
| } |
| </script> |
| ``` |
| エラーの内容が読み解けず行き詰まってしまいました... |
| よろしくお願いします。 |
| ### 追記 |
| ``` |
| import Vue from 'vue/dist/vue.esm.js' |
| import Router from './router/router' |
| import Header from './components/header.vue' |
| import VCalendar from 'v-calendar'; |
| Vue.use(VCalendar); |
| Vue.config.productionTip = false |
| var app = new Vue({ |
| el: '#app', |
| router: Router, |
| components:{ |
| 'navbar':Header, |
| } |
| }); |
| ``` |
hana00033 score 17
2019/11/26 23:58 投稿
| Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう |
| ### 前提・実現したいこと |
| Vue.jsでv-calendarを使って日付選択フォームを作成したいです。 |
| https://www.kabanoki.net/3905/ |
| を参考に作成しようとしています。 |
| ### 発生している問題・エラーメッセージ |
| npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため |
| 正しくプロジェクトにパッケージがインストールされているかを確認するために、 |
| ``` |
| npm list v-calendar |
| ``` |
| を実行したところ |
| ``` |
| taskcapsule@0.1.0 /Users/hanaka/Desktop/taskcapsule |
| └── UNMET DEPENDENCY v-calendar@1.0.0-beta.22 |
| npm ERR! missing: v-calendar@1.0.0-beta.22, required by taskcapsule@0.1.0 |
| ``` |
| と出ました。なので、 |
| ``` |
| npm install v-calendar@1.0.0-beta.22 |
| ``` |
| を行ったところパッケージは確認できたのですが、 |
| グーグルの検証の画面では下記のエラーが出てしまいます。 |
| ``` |
| Uncaught ReferenceError: Vue is not defined |
| at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue:9) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue?8ebb:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/components/about.vue (about.vue:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/router/router.js (router.js:1) |
| at __webpack_require__ (bootstrap:19) |
| at Module../app/javascript/packs/todo.js (todo.js:1) |
| at __webpack_require__ (bootstrap:19) |
| ``` |
| ###ソースコード |
| 実際に日付選択フォームを作成しているコンポーネントのvueファイルの中身です。 |
| ``` |
| <template> |
| <v-date-picker :mode="mode" |
| :formats="formats" |
| v-model="selectedDate"></v-date-picker> |
| </template> |
| <script> |
| import VCalendar from 'v-calendar'; |
| Vue.use(VCalendar); |
| Vue.config.productionTip = false |
| export default { |
| data: function(){ |
| return{ |
| mode: 'single', |
| formats: { |
| input: ['YYYY-MM-DD'], |
| }, |
| selectedDate: null, |
| } |
| } |
| } |
| </script> |
| ``` |
| エラーの内容が読み解けず行き詰まってしまいました... |
| よろしくお願いします。 |
| よろしくお願いします。 |
| ### 追記 |
| ``` |
| import Vue from 'vue/dist/vue.esm.js' |
| import Router from './router/router' |
| import Header from './components/header.vue' |
| import VCalendar from 'v-calendar'; |
| Vue.use(VCalendar); |
| Vue.config.productionTip = false |
| var app = new Vue({ |
| el: '#app', |
| router: Router, |
| components:{ |
| 'navbar':Header, |
| } |
| }); |
| ``` |
