Untitled

<script>
function renderInterests(...interests) {
  const sidebar = document.querySelector(".interests-page__sidebar");
  const content = document.querySelector(".interests-page__content");

  for (let { id, name, items } of interests) {
    const interestSidebarNode = document.createElement("h2");
    interestSidebarNode.innerHTML = `<a href="#${id}">${name}</a>`;
    sidebar.append(interestSidebarNode);

    const interestContentNodeH2 = document.createElement("h2");
    interestContentNodeH2.textContent = name;
    interestContentNodeH2.id = id;

    const interestContentNodeUl = document.createElement("ul");
    for (let item of items) {
      const itemNodeLi = document.createElement("li");
      itemNodeLi.textContent = item;
      interestContentNodeUl.append(itemNodeLi);
    }

    content.append(interestContentNodeH2, interestContentNodeUl);
  }
}

export default {
  mounted() {
    const hobbies = {
      id: "hobbies",
      name: "Мои хобби",
      items: ["Работа...", "Веб - программирование", "Спорт", "Чтение"],
    };
    const books = {
      id: "books",
      name: "Мои любимые книги",
      items: ["Джордж Оруэлл - 1984", "Марк Твен - Письма с земли"],
    };
    const music = {
      id: "music",
      name: "Моя любимая музыка",
      items: ["Mac Miller", "Red Hot Chili Peppers", "Nirvana", "Mac Quayle"],
    };
    const films = {
      id: "films",
      name: "Мои любимые фильмы",
      items: ["Mr.Robot", "Peaky Blinders", "Fight Club", "Berserk 1997"],
    };

    renderInterests(hobbies, books, music, films);
  },
};
</script>