質問編集履歴

タイトルを趣旨に沿うように正しく変更

2019/06/09 16:26

投稿

take-t.t.

スコア360

test CHANGED Viewed

	@@ -1 +1 @@
1	- Vue.js~~を使っ~~て~~ナビゲーショ~~ン~~ドロワ~~ー~~を実装~~したい
1	+ Vue.jsにおいてライブラリの読み込みとVueインスタンス内の記述が衝突してエラーになってしまう

test CHANGED Viewed

File without changes

エラーメッセージの追加

2019/06/09 16:25

投稿

take-t.t.

スコア360

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,11 +8,23 @@
-そこでうまく動かない部分を単体でjsfiddleで動かしてみたのですが、問題なく動作しました。
+※単体でその部分をjsfiddleで動かしてみる分には問題なく動作しました。
 [https://jsfiddle.net/6b1749fd/](https://jsfiddle.net/6b1749fd/)
+そしてコンソールで表示されたエラー内容は
+> Uncaught TypeError: Cannot read property 'default' of undefinedat script.js:1
-なのでおそらく他のコードとの兼ね合いで問題が起きていると思うのですが、自分では原因が分かりませんでした。
+で、 下記のJavaScritpのコードの一行目の「vue-js-modal」の読み込みでエラーになっているようです。
@@ -320,7 +332,7 @@
 ```JavaScript
-Vue.use(window["vue-js-modal"].default);
+Vue.use(window["vue-js-modal"].default); //vue-js-modalの読み込み

不要なコードの削除

2019/06/09 16:19

投稿

take-t.t.

スコア360

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -316,232 +316,6 @@
   } //header
-  section {
-      width: 100%;
-      height: auto;
-      @include center-wrapp;
-    .top-box {
-      @include section-box("TOP");
-      @include center-wrapp;
-      .title {
-        position: relative;
-        width: 500px;
-        height: 300px;
-        margin-bottom: 80px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        @include center-wrapp;
-        &::before,
-        &::after {
-          position: absolute;
-          content: '';
-          width: 20px;
-          height: 50px;
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-        }
-        &::before {
-          top: 0;
-          left: 0;
-          border-top: 1px solid #555;
-          border-left: 1px solid #555;
-        }
-        &::after {
-          bottom: 0;
-          right: 0;
-          border-bottom: 1px solid #555;
-          border-right: 1px solid #555;
-        }
-        h1 {
-          font-family: 'Orbitron', sans-serif;
-          font-size: 40px;
-          font-weight: bold;
-          line-height: 80px;
-          text-shadow: 1px 2px 2px #1d1d1d;
-          color: #101010;
-          background: linear-gradient(transparent 65%, rgb(72, 141, 252) 65%);
-        }
-      } //.title
-      p {
-        width: 250px;
-        line-height: 400%;
-        letter-spacing: 3px;
-        font-size: 15px;
-        color: #2a2a2a;
-        text-align: left;
-      }
-    } //top-box
-    .button {
-      margin: 40px;
-      border: solid 1px;
-      width: 150px;
-      height: 45px;
-        &:hover {
-          background-color: black;
-          transition: 0.2s;
-        }
-      a {
-        @include button-sizing;
-        line-height: 45px;
-        color: black;
-        &:hover {
-          color: white;
-          transition: 0.2s;
-        }
-      }
-    }
-  } //section
-  footer {
-    width: 100%;
-    height: 250px;
-    .footer-top {
-      background-color: rgb(71, 183, 204);
-      height: 100px;
-      @include center-wrapp;
-      ul {
-        display: flex;
-      }
-      li {
-        width: 90px;
-        padding: 10px;
-        margin: 0 40px;
-        font-size: 20px;
-        a {
-          font-family: 'Orbitron', sans-serif;
-          display: block;
-          width: 100%;
-          height: 100%;
-          color: #000000;
-        }
-      }
-    } //footer-top
-    .footer-bottom {
-      background-color: #191919;
-      height: 150px;
-      display: flex;
-      justify-content: space-around;
-      small {
-        color: white;
-        line-height: 150px;
-      }
-    } //footer-bottom
-  } //footer
-} //#app
 ```
 ```JavaScript