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

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

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

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

0回答

2341閲覧

Vue.jsでプラグイン導入後、上手くスタイルが当たりません。

aa316316

総合スコア39

Vue.js

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/02/14 10:52

編集2019/02/18 02:38

前提・実現したいこと

Vue CLI 3(vue create xxx)を用いて作成したプロジェクト内でプラグインを導入後、スタイルを上手く表示させることができていません。
詳細な状況は下記に記述させていただきます。
初歩的な質問ですが、よろしければアドバイス等いただけますと幸いです。

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

現在、Vue CLI 3(vue create xxx)を用いてプロジェクトを作成し、その中でdate-pickerをプラグインとして導入しようと考えています。
プラグインを探していたところvue-flatpickr-componentというプラグインを発見し、導入してみましたが下記のような点で上手く動作していません。

  • yarn serveでlocalhostを立ち上げ表示を確認したところ、初回起動時は期待通りにスタイルが当たっているが、リロード後もしくは違うページから遷移後にスタイルが当たらなくなってしまう。

やったこと

1.下記コマンドにてプラグインを追加

yarn add vue-flatpickr-component

2.main.js内に以下の記述を追加(プラグインの読み込み)

import VueFlatPickr from "vue-flatpickr-component"; import "flatpickr/dist/flatpickr.css"; Vue.use(VueFlatPickr);

3.vueファイル内で必要な記述を追加(詳細は下記に記述)
4.yarn serveで表示を確認

試したこと

他のプラグイン(Buefy ※cssフレームワーク)のdate-pickerを追加し表示を確認してみましたが、
こちらも同様に初回起動時のみ正常な表示が確認でき、リロード、もしくは他のページから遷移後はスタイルが当たっていなかったことを確認しています。

該当のソースコード

下記vueファイルにて表示を行っています。必要部分だけ切り出して記述しています。
基本的にはドキュメントの記述をコピペしています。

vue

1<template> 2 <div id="home"> 3 <header class="header"> 4 <span class="input__label">date-picker(range)</span> 5 6 <!-- 以下plugin --> 7 <div class="form-group"> 8 <flat-pickr 9 placeholder="start date" 10 :config="configs.start" 11 v-model="form.dateStart" 12 @on-change="onStartChange" 13 ></flat-pickr> 14 <flat-pickr 15 placeholder="end date" 16 :config="configs.end" 17 v-model="form.dateEnd" 18 @on-change="onEndChange" 19 ></flat-pickr> 20 </div> 21 </header> 22 </div> 23</template> 24 25<script> 26export default { 27 name: "home", 28 data() { 29 return { 30 configs: { 31 start: { 32 minDate: new Date(), 33 maxDate: null 34 }, 35 end: { 36 minDate: null 37 } 38 }, 39 form: { 40 dateStart: null, 41 dateEnd: null 42 } 43 }; 44 }, 45 methods: { 46 // eslint-disable-next-line 47 onStartChange(selectedDates, dateStr, instance) { 48 this.$set(this.configs.end, "minDate", dateStr); 49 }, 50 // eslint-disable-next-line 51 onEndChange(selectedDates, dateStr, instance) { 52 this.$set(this.configs.start, "maxDate", dateStr); 53 } 54 } 55}; 56</script> 57 58<style scoped> 59/* 以下classはflat-pickrにdefaultでついてくるみたいです */ 60.flatpickr-input { 61 width: 100px; 62 height: 35px; 63 margin-left: 6px; 64 padding-left: 4px; 65} 66</style> 67 68

javascript

1// main.js 2 3import Vue from "vue"; 4import App from "./App.vue"; 5import router from "./router"; 6 7// Buefy 8import Buefy from "buefy"; 9import "buefy/dist/buefy.css"; 10Vue.use(Buefy); 11 12// VueFlatPickr(date-picker) 13import VueFlatPickr from "vue-flatpickr-component"; 14import "flatpickr/dist/flatpickr.css"; 15Vue.use(VueFlatPickr); 16 17Vue.config.productionTip = false; 18 19// 共通cssの読み込み 20require("@/assets/css/reset.css"); 21require("@/assets/css/common.css"); 22require("@/assets/css/vars.css"); 23 24new Vue({ 25 router, 26 render: h => h(App) 27}).$mount("#app"); 28

ディレクトリ構成

ディレクトリ構成は以下です。
基本的にVue CLIで作成したものからほとんど触っておらず、変更は共通css等を追加したのみです。
イメージ説明

補足情報

"buefy": "^0.7.2", //使用しているcssフレームワーク "vue": "^2.5.22", "vue-flatpickr-component": "^8.1.1", "vue-router": "^3.0.1"

追記情報(2/18)

develop toolでスタイルを再度確認していたところ、
画面幅がFullHD(1920×1080)プロジェクトで使用する端末幅(1366×768)で確認した際にはdate-pickerには正常にスタイルが当たっていました。
スタイルが当たらないのは、iPadやiPad Proまたはそれ以下の端末幅を指定した時です。
もしかして、端末幅の問題ではなくiOSに対応していないという可能性もあるのでしょうか?

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問