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

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

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

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

Q&A

0回答

1376閲覧

VueでVueCtkDateTimePickerが利用できない

Linkey

総合スコア77

Vue.js

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

0グッド

0クリップ

投稿2022/04/13 14:38

編集2022/04/13 14:39

vueバージョン2を勉強しているものです。
以下のサイトを参考にVueCtkDateTimePickerを使ってカレンダーから日時を選択できるか動作確認を行っています。
https://www.kabanoki.net/6051/

VueCtkDateTimePickerをインストール後に使用したいページ(vueファイル)にVueCtkDateTimePickerを呼び出す実装をしたのですが
ページ遷移時に以下のエラーとなってしまいます。
イメージ説明

インストール後にVueCtkDateTimePickerを使うためにmain.jsとApp.vue以下の修正しました。
main.js

javascript

1import Vue from 'vue' 2import App from './App.vue' 3import VueCtkDateTimePicker from 'vue-ctk-date-time-picker'; 4import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'; 5 6Vue.config.productionTip = false 7Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker); 8 9new Vue({ 10 el: '#app', 11 data: { 12 value: null 13 } 14}); 15 16new Vue({ 17 render: h => h(App), 18}).$mount('#app')

App.vue

vue

1<template> 2 <div id="app"> 3 <img alt="Vue logo" src="./assets/logo.png"> 4 <vue-ctk-date-time-picker label="日時を選択" v-model="value"></vue-ctk-date-time-picker> 5 <HelloWorld msg="Welcome to Your Vue.js App"/> 6 </div> 7</template> 8 9<script> 10import HelloWorld from './components/HelloWorld.vue' 11 12export default { 13 name: 'App', 14 components: { 15 HelloWorld 16 }, 17 data(){ 18 return { 19 value: '' 20 } 21 } 22} 23</script> 24 25<style> 26#app { 27 font-family: Avenir, Helvetica, Arial, sans-serif; 28 -webkit-font-smoothing: antialiased; 29 -moz-osx-font-smoothing: grayscale; 30 text-align: center; 31 color: #2c3e50; 32 margin-top: 60px; 33} 34</style>

インストールとvueを動かすコマンドは以下の通りです。

Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows PS C:\Users\vue2-sample> npm i --save vue-ctk-date-time-picker added 28 packages, and audited 950 packages in 8s 92 packages are looking for funding run `npm fund` for details 8 high severity vulnerabilities To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. PS C:\Users\vue2-sample> npm run serve > vue2-sample@0.1.0 serve > vue-cli-service serve INFO Starting development server... [24%] building (4/103 modules) DONE Compiled successfully in 13890ms 23:21:38 App running at: - Local: http://localhost:8080/ - Network: http://XXX.XXX.X.X:8080/ Note that the development build is not optimized. To create a production build, run npm run build. WAIT Compiling... 23:22:55 Compiling... DONE Compiled successfully in 258ms 23:22:55 App running at: - Local: http://localhost:8080/ - Network: http://XXX.XXX.X.X:8080/

他のVueCtkDateTimePickerの使い方のサイトはエラーについて調べていますが今のところ解決できていません。
vueでVueCtkDateTimePickerを使って実装したことのある方がいましたらご回答いただけないでしょうか?
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問