Vue.jsの<script>タグ内の記述方法について
Q&A
解決したいこと
Vue.jsを使用して架空サイトを製作しています。
App.vueとは別にHeader.vueのファイルを作り、その中でハンバーガーメニューの実装をしているところなのですが< script >タグ内にハンバーガーメニューに関する記述（「 // ハンバーガーメニュー 」の部分です）をしてchromeで確認すると、Header.vue内に記述した全ての表記が反映されず画面が真っ白になってしまいます。
理想はHeader.vueの中にパソコンサイズに適応したヘッダーメニューとモバイルサイズに適応したヘッダーメニュー（ハンバーガーメニュー）を記述したいのですが不可能なのでしょうか？
（ハンバーガーメニューについての記述は他の方のブログを参考に記述いたしました）
該当するソースコード
Header.vue
<script setup>
import { ref } from 'vue'
const header_menu = ref('MENU')
const header_gallery = ref('GALLERY')
const header_staff = ref('STAFF')
const header_access = ref('ACCESS')
const header_recruit = ref('RECRUIT')
// ハンバーガーメニュー ここから
const app = Vue.createApp({
data() {
return {
active: false
}
},
methods: {
click: function () {
this.active = !this.active
}
},
});
app.mount("#app");
// ハンバーガーメニュー ここまで
</script>
自分で試したこと
Header.vueとは別にハンバーガーメニュー用のvueファイルを作成し、App.vueに取り込む方法であれば問題なく行えました。
初歩的なミスであればすみません。
よろしくお願いいたします。
0 likes
