Gridsome

Variable

Variable de méthode

Utilisation de la propriété name de user

<template>
  <Layout>
    <header class="header">
      <h1>{{ user.name }}</h1>
    </header>
  </Layout>
</template>

Définition de user

export default {
  data() {
    return {
      user: {
        name: "totototo"
      }
    }
  },
};
</script>

Utiliser graphQL dans <script>

<template>
  <div>
    <header class="layout-header">
      <nav class="nav">
        <div class="row justify-content-start">
          <div class="menu col-10">
            <g-link class="navlink" v-bind:to=allPage[1].name>{{allPage[1].name}}</g-link>
          </div>
          <div class="col-1 switch">
            <ToggleTheme />
          </div>
        </div>
      </nav>
    </header>
  </div>
</template>

<script>
import { fetch } from 'gridsome'

export default {
  data() {
      return {
        allPage: [],
      }
  },
  async mounted () {
    const results = await fetch('/');
    
    this.allPage = results.data.allPage.map((r) => {
      return {
        name: r.path.slice(1, -1),
        path: r.path
      }
    });
  }
};
</script>

---

Backlinks

• Hominem
• 2021-12-17