Search code examples
javascriptvue.jsvue-componentvuex

Vue 3.0 VsBreadcrumb error - Prop being mutated: "items"

I am developing a website using vuesax theme. vue cli 3.0

Default Layout Page

<template>
      <div class="main-wrapper">
        <!---Navigation-->
        <Navbar
          :topbarColor="topbarColor"
          :logo="require('@/assets/images/logo/logo-light-icon.png')"
          :title="logotitle"
        />
        <!---Sidebar-->
        <SideBar parent=".main-wrapper" />
    
        <Breadcrumbs :pageTitle="pageTitle" :breadcrumbLinks=breadcrumbLinks />
          
        <!---Page Container-->
        <div class="main-container-fluid">      
          <slot />
        </div>
      </div>
    </template>

Dashboard Component

<template>
  <DefaultLayout :pageTitle="$t('dashboard.pageTitle')" :breadcrumbLinks=breadcrumbLinks>
  <div>
    <States />
    <vs-row vs-justify="center">
      <vs-col vs-lg="12">
        <vs-card>
          <div slot="header">
            <div class="d-flex align-items-center">
              <div>
                <h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5>                
              </div>
              <div class="ml-auto text-right">
                <div>
                  <span class="text-muted">{{ $t('dashboard.projects.total') }}</span>
                  <h2 class="text-success mb-0">90</h2>
                </div>
              </div>
            </div>
          </div>
          <RecentProjects />
        </vs-card>
      </vs-col>
    </vs-row>
  </div>
  </DefaultLayout>
</template>
<script>
import DefaultLayout from "../layouts/DefaultLayout";
import RecentProjects from "../components/dashboard/RecentProjects.vue";
import States from "../components/dashboard/States.vue";
export default {
  name: "Dashboard",
  components: {    
    RecentProjects,
    States,      
    DefaultLayout
  },
  data: () => ({    
    breadcrumbLinks: [
      {
        title: global.vm.$t('breadcrumbs.home'),
        url: ""
      },
      {
        title: global.vm.$t('breadcrumbs.dashboard'),
        active: true
      }
    ],
  })
};
</script>

Breadcrumbs Component

<template>
  <vs-row class="vs-breadcrumb-row" vs-type="flex" vs-justify="space-around">
      <vs-col
          type="flex"
          vs-justify="center"
          vs-align="center"
          vs-lg="12"
          vs-sm="12"
          vs-xs="12"
          code-toggler
        >
        <vs-card class="br-0">
          <h4 class="card-title mb-0 d-flex">
            <vs-row vs-justify="space-between" vs-align="center">              
            {{ pageTitle }}                        
              <div class="d-flex align-items-center">
                <vs-breadcrumb separator="chevron_right"  
                :items="breadcrumbLinks"
                ></vs-breadcrumb>              
            </div>  
            </vs-row>            
          </h4>                      
        </vs-card> 
        </vs-col> 
  </vs-row>
</template>

<script>

export default {
  name: "Breadcrumbs", 
  props: {
    pageTitle: {
      type: String
    },
    breadcrumbLinks: {
      type: Array
    }
  }
};
</script>

I am getting the following error enter image description here

and also I have integrated vue i18n module, translation is working fine except for one condition: when I change from EN to FR the current page breadcrumbs translation doesn't change, it still remains in EN, but it's changed to FR when I switch to other pages.

Solution

  • i18n translates should be a computed property, this is the reason you are getting warnings.

    The breadcrumbLinks prop is mutating on the child component whenever you switch one language from another, and this is the reason that breadcrumb translations aren't working, just use a computed property instead:

    <template>
  <DefaultLayout :pageTitle="$t('dashboard.pageTitle')" :breadcrumbLinks=breadcrumbLinks>
  <div>
    <States />
    <vs-row vs-justify="center">
      <vs-col vs-lg="12">
        <vs-card>
          <div slot="header">
            <div class="d-flex align-items-center">
              <div>
                <h5 class="card-title">{{ $t('dashboard.projects.recent') }}</h5>                
              </div>
              <div class="ml-auto text-right">
                <div>
                  <span class="text-muted">{{ $t('dashboard.projects.total') }}</span>
                  <h2 class="text-success mb-0">90</h2>
                </div>
              </div>
            </div>
          </div>
          <RecentProjects />
        </vs-card>
      </vs-col>
    </vs-row>
  </div>
  </DefaultLayout>
</template>
<script>
import DefaultLayout from "../layouts/DefaultLayout";
import RecentProjects from "../components/dashboard/RecentProjects.vue";
import States from "../components/dashboard/States.vue";
export default {
  name: "Dashboard",
  components: {    
    RecentProjects,
    States,      
    DefaultLayout
  },
  computed: {    
    breadcrumbLinks() {
      return [
        {
          title: global.vm.$t('breadcrumbs.home'),
          url: ""
        },
        {
          title: global.vm.$t('breadcrumbs.dashboard'),
          active: true
        }
      ],
    }
  }
};
</script>