// js/shoplist.js

console.log("shoplist.js loaded!");

(() => {
  document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM fully loaded, starting Vue...");

    if (!window.Vue) {
      console.error("Vue が読み込まれていません");
      return;
    }

    const { createApp } = Vue;

    const el = document.querySelector("#ShopList");
    if (!el) {
      console.error("#ShopList が見つかりません");
      return;
    }

    const app = createApp({
      data() {
        return {
          shops: [],
        };
      },
      mounted() {
        console.log("ShopList Vue mounted!");

        fetch("./data/shoplist.json")
          .then((res) => {
            console.log("fetch status:", res.status, res.url);
            return res.json();
          })
          .then((data) => {
            console.log("shops loaded:", data);
            this.shops = data;
          })
          .catch((err) => {
            console.error("ショップデータの読み込みに失敗しました", err);
          });
      },
    });

    app.mount("#ShopList");
  });
})();