Avoid mutating a prop directly: Instead, use a data or computed property based on the prop's value. Prop being mutated: “items”

Question

I am passing the param for breadcrumbs in array format for each page.

I get the following warning

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: "items"

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.

The layout structure is.

Dashboard - sending the array param to default layout and default layout pass it to breadcrumb
- Default Layout
  - Breaducrumb

Dashboard Component

export default {
  name: "Dashboard",
  components: {               
    DefaultLayout
  },
  data: () => ({    
    breadcrumbLinks: [
      {
        title: global.vm.$t('breadcrumbs.home'),
        url: ""
      },
      {
        title: global.vm.$t('breadcrumbs.dashboard'),
        active: true
      }
    ],
  })
};

yuri yuri · Accepted Answer · 2020-08-26T07:37:54

The props sent to children should not be modified outside it's parent component.

Dashboard - sending the array param to default layout and default layout pass it to breadcrumb

    Default Layout
        Breaducrumb

Your breadcrumbLinks prop is been changed outside of Dashboard component where it was created, so, you are probably making changes on this prop on Default Layout or Breaducrumb components.

If you avoid mutating props outside its components you'll avoid this warnings. But it's a warning, not an error, what it says is that if the parent component gets mutated, the child components, in this case Default Layout and Breaducrumb will be updated with the values previously or initially set on the parent component.

So any change you do to a prop on any child component will be lost, this may not be a problem and make your code work perfectly but it is certainly a pattern that should be avoid.

If you want to mutate props:

Send a $emit to the parent that has this props as data and performe the changes there. Here you can read about custom events - VueDocs
Use a global state manager as Vuex

In your case you may not need any of this, please, show us the function that modifies breadcrumbLinks prop.

It should be somewhere in DefaultLayout or on Breadcrumb components, but for sure it is not on the code you posted.

Avoid mutating a prop directly: Instead, use a data or computed property based on the prop's value. Prop being mutated: “items”

1 Answers