How to pass props from one component to another in Nuxtjs

Question

I have my index.vue inside the page folder and I am trying to loop all the category gotten from the api so I did this.

<template>
  <div>
    <Header :category="category" />
  </div>
</template>

<script>
import Header from '@/components/Front/Header'

export default {
  name: 'MainSite',
  components: {
    Header,
  },
  props: ['category', 'name'],
  data: () => ({
    frontpage: [],
    category: [],
  }),
  async fetch() {
    const response = await this.$axios.get('/api/frontpage')
    this.frontpage = response.data.posts
    this.category = response.data.cat
  },
}
</script>

I have the Header.vue as this which contains the navigation link I want to loop through

<template>
  <div class="collapse navbar-collapse">
    <!-- menus -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <NuxtLink class="nav-link" to="/">Home</NuxtLink>
      </li>
      <li v-for="(cat, i) in category" :key="i.name" class="nav-item">
        <NuxtLink class="nav-link" :to="'/category/' + cat.slug">{{
          cat.name
        }}</NuxtLink>
      </li>
      <template v-if="$auth.user">
        <li class="nav-item">
          <a class="nav-link" href="/dashboard">Admin</a>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['category', 'name'],
}
</script>

I keep getting this error

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "category"

and also this error

client.js?06a0:57 [Vue warn]: The data property "category" is already declared as a prop. Use prop default value instead.

Anytime I reload the browser the links gets displayed and the disappears with those errors above and this also

<template>
  <li class="nav-item" data-v-383d0eae="">
    <a href="/category/video" class="nav-link" data-v-383d0eae="">Video</a>
  </li>
</template>

Does this answer your question? [Vue 2 - Mutating props vue-warn](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) — kissu, Mar 31 '22 at 14:47
Please try to put more effort into the formatting of your actual code. Some ESlint configuration could also give you those warning directly (several variables with the same name basically). Otherwise, this is a duplicate that can be found pretty easily with a quick search of the few characters of the first error here, on in other places. — kissu, Mar 31 '22 at 14:49
@kissu i was able to solve the props problem. But on a category page i will have to fetch the props again which causes flicker when navigating the menu — Henry Oladeji, Mar 31 '22 at 14:50
Flicker issues can be solved in several ways but our out of the scope of this question so far. Also, a visual could be quite helpful to understand what is the actual flicker issue. — kissu, Mar 31 '22 at 14:52
On my _slug.vue i have this ```
``` and also this ```data:()=>({ categories:[] }) ```and ```async fetch(){ const response = await this.$axios.get('/api/frontpage/' + this.$route.params.slug) this.categories = response.data.cat``` — Henry Oladeji, Mar 31 '22 at 14:56

How to pass props from one component to another in Nuxtjs

0 Answers0