質問編集履歴
3
情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,6 +13,14 @@
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
とエラーが出ました。
|
|
16
|
+
|
|
17
|
+
**application.html.erb**で
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
<%= javascript_pack_tag 'footer' %>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
を呼び出した時のエラーだと思います。
|
|
16
24
|
文法エラーとのことはわかっているのですが、!の部分がエラー表示されてる意味がわかりません。
|
|
17
25
|
|
|
18
26
|
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11
|
|
@@ -186,4 +194,4 @@
|
|
|
186
194
|
|
|
187
195
|
### 補足情報（FW/ツールのバージョンなど）
|
|
188
196
|
|
|
189
|
-
Docker上で開発してます。
|
|
197
|
+
Docker上で開発してます。Docker version 20.10.5,
|
2
情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -149,6 +149,41 @@
|
|
|
149
149
|
|
|
150
150
|
|
|
151
151
|
|
|
152
|
+
hello_vueが上手くいってるのだから、hello_vueの記述をパクればいいと思い、
|
|
153
|
+
|
|
154
|
+
footer.jsを
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
import Vue from 'vue/dist/vue/vue.esm.js'
|
|
158
|
+
import Router from './router/router'
|
|
159
|
+
import footer from './components/footer.vue'
|
|
160
|
+
import App from '../app.vue'
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
var app = new Vue({
|
|
164
|
+
router: Router,
|
|
165
|
+
el: '#footer',
|
|
166
|
+
components: {
|
|
167
|
+
'navbar': footer,
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
174
|
+
const app = new Vue({
|
|
175
|
+
render: h => h(App)
|
|
176
|
+
}).$mount()
|
|
177
|
+
document.body.appendChild(app.$el)
|
|
178
|
+
|
|
179
|
+
console.log(app)
|
|
180
|
+
})
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
をこんな感じにしても、エラー内容は変わらずでした。
|
|
184
|
+
どうしたら<!DOCTYPE HTML>
|
|
185
|
+
の!に反応せずに済むのでしょうか
|
|
186
|
+
|
|
152
187
|
### 補足情報（FW/ツールのバージョンなど）
|
|
153
188
|
|
|
154
189
|
Docker上で開発してます。
|
1
情報の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
+
# [ 最新のコード](https://github.com/Harasou21/coffee_passport/tree/developing-with-vue.js)
|
|
4
|
+
|
|
3
5
|
現在railsでアプリを開発してるのですが、
|
|
4
6
|
フッターをvue.jsで実装して、試しにお問合せフォームを実装したいです。
|
|
5
7
|
|
|
@@ -95,6 +97,58 @@
|
|
|
95
97
|
|
|
96
98
|
書写しのミスとか、パスのミスを記事と比べて探しましたが、わかりません
|
|
97
99
|
|
|
100
|
+
|
|
101
|
+
> JavaScriptを期待しているところにHTMLが帰ってきて、ブラウザが<!DOCTYPE html> をJavaScriptとして解析しようとして!がUnexpected tokenと判定されているように思いました。
|
|
102
|
+
|
|
103
|
+
とのご意見をいただきました。
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
<footer id="footer">
|
|
107
|
+
<%# vue.js側でこのタグとコンポーネントを紐付ける %>
|
|
108
|
+
<%= render 'shared/footer'%>
|
|
109
|
+
</footer>
|
|
110
|
+
```
|
|
111
|
+
application.html.erbで以前は、この中にvueに関する記述があったので、ledsunがおっしゃるようなことが起こっているのかな、と思い、
|
|
112
|
+
|
|
113
|
+
_footer.html.erbに
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
<div class="footer">
|
|
117
|
+
<router-view></router-view>
|
|
118
|
+
<navbar></navbar>
|
|
119
|
+
<%= javascript_pack_tag 'footer' %>
|
|
120
|
+
<div>
|
|
121
|
+
<%= link_to "お問い合せ", "/contact"%>
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
<%= link_to "私たちについて", "#"%>
|
|
125
|
+
</div>
|
|
126
|
+
<div>
|
|
127
|
+
<%= link_to "コーヒーをもっと知る", ""%>
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
<%= link_to "Coffee Passport とは", "/about_coffee_passport"%>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
試しに、こんな感じで呼び出したのですが、
|
|
137
|
+
Uncaught SyntaxError: Unexpected token ‘!’
|
|
138
|
+
こういう感じでエラーが起きてしまいました。
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
また、hello_vueの時はUncaught SyntaxError: Unexpected token ‘!’
|
|
143
|
+
とならないのに、自作で作ったfooter.jsはを、application.html.erbで
|
|
144
|
+
<%=javascript_pack_tag 'footer'%>
|
|
145
|
+
と呼び出しても
|
|
146
|
+
|
|
147
|
+
、Uncaught SyntaxError: Unexpected token ‘!’となってしまいます
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
98
152
|
### 補足情報（FW/ツールのバージョンなど）
|
|
99
153
|
|
|
100
154
|
Docker上で開発してます。
|