teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Vue.jsがの結果が反映されていない。

編集履歴

質問編集履歴

5

文の修正

2021/03/20 10:24

投稿

natume4948
natume4948

スコア9

test CHANGED
File without changes
test CHANGED
@@ -172,7 +172,7 @@
172
172
 
173
173
  routes: [
174
174
 
175
- { name: 'math', path: '/math', component: require('./components/vue/math.vue').default }
175
+ { name: 'math', path: '/math', component: require('./components/vue/lesson2.vue').default }
176
176
 
177
177
 
178
178
 
@@ -200,7 +200,71 @@
200
200
 
201
201
 
202
202
 
203
- ### 試したこと
203
+ ### 追記のエラー文
204
+
205
+ ```
206
+
207
+ ERROR Failed to compile with 1 errors 19:13:09
208
+
209
+
210
+
211
+ This dependency was not found:
212
+
213
+
214
+
215
+ * {{ asset('/resources/js/app.js') }}?vue&type=script&lang=js& in ./resources/js/components/lessons/Lesson2.vue
216
+
217
+
218
+
219
+ To install it, you can run: npm install --save {{ asset('/resources/js/app.js') }}?vue&type=script&lang=js&
220
+
221
+ Asset Size Chunks Chunk Names
222
+
223
+ /css/app.css 181 KiB /js/app [emitted] /js/app
224
+
225
+ /js/app.js 9.62 MiB /js/app [emitted] /js/app
226
+
227
+
228
+
229
+ ERROR in ./resources/js/components/lessons/Lesson2.vue
230
+
231
+ Module not found: Error: Can't resolve '{{ asset('/resources/js/app.js') }}?vue&type=script&lang=js&' in '/Users/******(自分の名前のため伏せさせていただきました）/beginner-lesson1/resources/js/components/lessons'
232
+
233
+ @ ./resources/js/components/lessons/Lesson2.vue 2:0-81 3:0-76 3:0-76 10:2-8
234
+
235
+ @ ./resources/js/app.js
236
+
237
+ @ multi ./resources/js/app.js ./resources/sass/app.scss
238
+
239
+ npm ERR! code 2
240
+
241
+ npm ERR! path /Users/******/beginner-lesson1
242
+
243
+ npm ERR! command failed
244
+
245
+ npm ERR! command sh -c cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
246
+
247
+
248
+
249
+ npm ERR! A complete log of this run can be found in:
250
+
251
+ npm ERR! /Users/******/.npm/_logs/2021-03-20T10_13_12_767Z-debug.log
252
+
253
+ npm ERR! code 2
254
+
255
+ npm ERR! path /Users/******/beginner-lesson1
256
+
257
+ npm ERR! command failed
258
+
259
+ npm ERR! command sh -c npm run development
260
+
261
+
262
+
263
+ npm ERR! A complete log of this run can be found in:
264
+
265
+ npm ERR! /Users/******/.npm/_logs/2021-03-20T10_13_12_807Z-debug.log
266
+
267
+ ```
204
268
 
205
269
 
206
270
 
@@ -210,7 +274,9 @@
210
274
 
211
275
  Vue.js- version:2.6.12
212
276
 
213
- npm 6.14.10
277
+ npm 7.6.3
278
+
279
+ vue/cli 4.5.12
214
280
 
215
281
  node.js v14.15.4
216
282
 

4

Laravelを追加しました。

2021/03/20 10:24

投稿

natume4948
natume4948

スコア9

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,37 @@
12
12
 
13
13
  ```Vue.js
14
14
 
15
+ <<template>
16
+
17
+ <div class="container">
18
+
19
+ <div class="row justify-content-center">
20
+
21
+ <div class="col-md-8">
22
+
23
+ <div class="card">
24
+
25
+ <div id="app" class="card-body">
26
+
27
+ <div class="d-flex justify-content-start mb-3">
28
+
29
+ <div class="mr-auto">
30
+
31
+ <span class="span-header">Lesson 2</span>
32
+
33
+ </div>
34
+
35
+ <div class="align-self-center">
36
+
37
+ <button type="button" class="btn btn-dark" @click="onBack">戻る</button>
38
+
39
+ </div>
40
+
41
+ </div>
42
+
15
- <div id="app" class="mb-5">
43
+ <div id="app" class="mb-5">
16
-
44
+
17
- <div class="quesion-header">足し算</div>
45
+ <div class="quesion-header">１．入力値の合計を表示してください。</div>
18
46
 
19
47
  <input type="number" v-model.number="left">
20
48
 
@@ -26,82 +54,148 @@
26
54
 
27
55
  <p>{{ total }}</p>
28
56
 
57
+ </div>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
29
67
  </div>
30
68
 
31
-
69
+ </template>
70
+
71
+
72
+
32
-
73
+ <script>
74
+
75
+
76
+
77
+ export default {
78
+
79
+ props: {
80
+
81
+ total: Number,
82
+
83
+ },
84
+
85
+ data () {
86
+
87
+ return {
88
+
89
+ left: 0,
90
+
91
+ right: 0,
92
+
93
+ birthday: null,
94
+
95
+ count: 0,
96
+
97
+ }
98
+
99
+ },
100
+
101
+ mounted () {
102
+
103
+ //
104
+
105
+ },
106
+
107
+ watch: {
108
+
109
+ //
110
+
111
+ },
112
+
113
+ computed: {
114
+
115
+ total() {
116
+
117
+ return this.left + this.right
118
+
119
+ },
120
+
121
+ age() {
122
+
123
+ //
124
+
125
+ }
126
+
127
+ },
128
+
129
+ methods: {
130
+
131
+ onBack() {
132
+
133
+ this.$router.push({ name: 'home' })
134
+
135
+ }
136
+
137
+ },
138
+
139
+ }
140
+
141
+ </script>
142
+
143
+
144
+
145
+ <style lang="scss" scoped>
146
+
147
+ @import "resources/sass/variables";
148
+
149
+ </style>
150
+
151
+
152
+
153
+ app.js
154
+
155
+
156
+
157
+ window.Vue = require('vue');
158
+
159
+ import VueRouter from 'vue-router';
160
+
161
+ Vue.use(VueRouter);
162
+
163
+ import Vuex from 'vuex';
164
+
165
+ Vue.use(Vuex);
166
+
167
+
168
+
169
+ const router = new VueRouter({
170
+
171
+ mode: 'history',
172
+
173
+ routes: [
174
+
175
+ { name: 'math', path: '/math', component: require('./components/vue/math.vue').default }
176
+
177
+
178
+
179
+ { path: '*', component: require('./components/commons/NotFoundComponent.vue').default },
180
+
181
+ ]
182
+
33
- 計算式
183
+ });
34
-
184
+
185
+
186
+
35
- var app = new Vue ({
187
+ const app = new Vue({
36
188
 
37
189
  el: '#app',
38
190
 
39
- data: {
40
-
41
- left: 0,
191
+ store,
42
-
43
- right: 0,
192
+
44
-
45
- },
46
-
47
- computed: {
48
-
49
- total: function(){
50
-
51
- return this.left + this.right
52
-
53
- },
54
-
55
- },
56
-
57
- })
58
-
59
- app.js
60
-
61
-
62
-
63
- window.Vue = require('vue');
64
-
65
- import VueRouter from 'vue-router';
66
-
67
- Vue.use(VueRouter);
68
-
69
- import Vuex from 'vuex';
70
-
71
- Vue.use(Vuex);
72
-
73
-
74
-
75
- const router = new VueRouter({
76
-
77
- mode: 'history',
78
-
79
- routes: [
193
+ router,
80
-
81
- { name: 'math', path: '/math', component: require('./components/vue/math.vue').default }
82
-
83
-
84
-
85
- { path: '*', component: require('./components/commons/NotFoundComponent.vue').default },
86
-
87
- ]
88
194
 
89
195
  });
90
196
 
91
197
 
92
198
 
93
- const app = new Vue({
94
-
95
- el: '#app',
96
-
97
- store,
98
-
99
- router,
100
-
101
- });
102
-
103
-
104
-
105
199
  ```
106
200
 
107
201
 
@@ -120,4 +214,6 @@
120
214
 
121
215
  node.js v14.15.4
122
216
 
217
+ 環境はMACです。
218
+
123
219
  ここにより詳細な情報を記載してください。

3

言語の追加

2021/03/19 05:57

投稿

natume4948
natume4948

スコア9

test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,52 @@
56
56
 
57
57
  })
58
58
 
59
+ app.js
60
+
61
+
62
+
63
+ window.Vue = require('vue');
64
+
65
+ import VueRouter from 'vue-router';
66
+
67
+ Vue.use(VueRouter);
68
+
69
+ import Vuex from 'vuex';
70
+
71
+ Vue.use(Vuex);
72
+
73
+
74
+
75
+ const router = new VueRouter({
76
+
77
+ mode: 'history',
78
+
79
+ routes: [
80
+
81
+ { name: 'math', path: '/math', component: require('./components/vue/math.vue').default }
82
+
83
+
84
+
85
+ { path: '*', component: require('./components/commons/NotFoundComponent.vue').default },
86
+
87
+ ]
88
+
89
+ });
90
+
91
+
92
+
93
+ const app = new Vue({
94
+
95
+ el: '#app',
96
+
97
+ store,
98
+
99
+ router,
100
+
101
+ });
102
+
103
+
104
+
59
105
  ```
60
106
 
61
107
 

2

文の修正

2021/03/18 07:31

投稿

natume4948
natume4948

スコア9

test CHANGED
File without changes
test CHANGED
@@ -70,4 +70,8 @@
70
70
 
71
71
  Vue.js- version:2.6.12
72
72
 
73
+ npm 6.14.10
74
+
75
+ node.js v14.15.4
76
+
73
77
  ここにより詳細な情報を記載してください。

1

脱字の修正

2021/03/18 07:02

投稿

natume4948
natume4948

スコア9

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```Vue.js
14
14
 
15
- div id="app" class="mb-5">
15
+ <div id="app" class="mb-5">
16
16
 
17
17
  <div class="quesion-header">足し算</div>
18
18
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  <p>{{ total }}</p>
28
28
 
29
- </div>
29
+ </div>
30
30
 
31
31
 
32
32