質問編集履歴
1
エラー内容を勘違いしていました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
vue cli3 vueファイルに
|
|
1
|
+
vue cli3 vueファイルにimport Vue from 'vue'を追加すると描画されない
|
test
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
Vue cli3を試しているのですが、script部分に
|
|
1
|
+
Vue cli3を試しているのですが、script部分にimport Vue from 'vue'を追加すると、描画されなくなります。
|
|
2
2
|
|
|
3
|
-
下記のソースは
|
|
3
|
+
下記のソースはボタンで変数loadingを反転させ、loading...かその下の要素を表示させたかったものです。
|
|
4
4
|
|
|
5
|
-
しかし、
|
|
5
|
+
しかし、import Vue from 'vue'を使用すると描画自体がされなくなってしまいました。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
new Vueやv-showのせいかと思い、その部分を消した状態でも真っ白な画面でした。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
ソースコードの一番下のscript内のようにimport Vue from 'vue'だけを記述している状態です。
|
|
10
10
|
|
|
11
|
-
el:'#app'
|
|
12
11
|
|
|
13
|
-
}
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
chromeの検証ツールのconsoleのエラーは次にように出てきました。
|
|
14
|
+
|
|
15
|
+
Uncaught TypeError: Cannot set property 'render' of undefined
|
|
16
|
+
|
|
17
|
+
|
|
16
18
|
|
|
17
19
|
ご教授よろしくお願いいたします。
|
|
18
20
|
|
|
@@ -22,11 +24,13 @@
|
|
|
22
24
|
|
|
23
25
|
<div id="app">
|
|
24
26
|
|
|
27
|
+
<button v-on:click="loading = !loading">ボタン</button>
|
|
28
|
+
|
|
25
29
|
<div id="nav">
|
|
26
30
|
|
|
27
|
-
<div v-show="loading">loading...</div>
|
|
31
|
+
<div v-show="!loading">loading...</div>
|
|
28
32
|
|
|
29
|
-
<div v-show="
|
|
33
|
+
<div v-show="loading">
|
|
30
34
|
|
|
31
35
|
<router-link to="/">Home</router-link>
|
|
32
36
|
|
|
@@ -60,6 +64,14 @@
|
|
|
60
64
|
|
|
61
65
|
color: #2c3e50;
|
|
62
66
|
|
|
67
|
+
z-index: -1;
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button:active{
|
|
72
|
+
|
|
73
|
+
background-color: #2c3e50;
|
|
74
|
+
|
|
63
75
|
}
|
|
64
76
|
|
|
65
77
|
#nav {
|
|
@@ -86,27 +98,21 @@
|
|
|
86
98
|
|
|
87
99
|
<script>
|
|
88
100
|
|
|
89
|
-
|
|
101
|
+
import Vue from 'vue'
|
|
102
|
+
|
|
103
|
+
/*
|
|
104
|
+
|
|
105
|
+
new Vue({
|
|
90
106
|
|
|
91
107
|
el: '#app',
|
|
92
108
|
|
|
93
|
-
data:
|
|
109
|
+
data: {
|
|
94
110
|
|
|
95
|
-
|
|
111
|
+
loading: false
|
|
96
|
-
|
|
97
|
-
},
|
|
98
|
-
|
|
99
|
-
mounted () {
|
|
100
|
-
|
|
101
|
-
setTimeout(() => {
|
|
102
|
-
|
|
103
|
-
this.loading = false
|
|
104
|
-
|
|
105
|
-
}, 1000)
|
|
106
112
|
|
|
107
113
|
}
|
|
108
114
|
|
|
109
|
-
}
|
|
115
|
+
})*/
|
|
110
116
|
|
|
111
117
|
</script>
|
|
112
118
|
|