Компонент неправильно выводит контент из другого компонента - PullRequest
Новая
       50

Компонент неправильно выводит контент из другого компонента

1 голос
/ 12 марта 2020

Я использую Gridsome впервые. Я просто пытаюсь настроить макет моего сайта - у меня нет подключенного API или чего-то еще, просто пытаюсь вывести raw HTML. У меня есть компонент SkipToContent и компонент заголовка. Оба выводят содержимое компонента Header, и я в замешательстве. Я попытался перезапустить локальный сервер и общие вещи отладки, такие как убедиться, что все файлы сохранены. Ниже приведены файлы:

Заголовок. vue

<template>
  <header class="header">
    <strong>
      <g-link to="/">{{ $static.metadata.siteName }}</g-link>
    </strong>
    <nav class="nav">
      <g-link class="nav__link" to="/">Home</g-link>
      <g-link class="nav__link" to="/about/">About</g-link>
      <g-link class="nav__link" to="/web/">Web Development</g-link>
      <g-link class="nav__link" to="/photography/">Photography</g-link>
    </nav>
  </header>
</template>

<script lang="ts">
import Vue from "vue";

export default class Header extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;
</style>

SkipToContent. vue

<template>
  <a href="#main-content" class="skip-to-content__link">Skip to content</a>
</template>

<script lang="ts">
import Vue from 'vue';

export default class SkipToContent extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

.skip-to-content {
  &__link {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -200%);
    transition: transform 0.15s ease;
    background: $primary;
    &:focus {
      transform: translate(-50%, 50%);
    }
  }
}
</style>

По умолчанию. vue

<template>
  <div class="layout">
    <SkipToContent />
    <Header />
    <main id="main-content">
      <slot />
    </main>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import SkipToContent from "~/components/SkipToContent.vue";
import Header from "~/components/Header.vue";
import { Component } from "vue-property-decorator";

@Component({
  components: {
    Header,
    SkipToContent,
  }
})
export default class App extends Vue {

};
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

</style>

HTML Вывод: enter image description here

Мне кажется, что я либо делаю что-то очень очевидное неправильно, или это какая-то проблема с использованием TypeScript в Gridsome?

Спасибо за любые предложения :)

...