Vue 2 Avoid mutating a prop directly since the value will be overwritten

Question

I read the docs, also read similar post but still don't get it

This the the warn which i get it

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.

Child component:

    <div>
        <v-container class="ma-0 pa-0">
            <v-col class="pa-0" cols="8">
                <v-text-field
                    class="search-field ma-0"
                    flat
                    color="black"
                    :label="$t('keyWord')"
                    v-model="searchKeyWord"
                    @click:clear="clearFilterByKeyWord"
                    clearable
                ></v-text-field>
            </v-col>
            </v-row>
            <v-btn
                depressed
                class="black--text my-10 rounded-0"
                color="primary"
                @click="globalFilter"
                >{{ $t('search_subsidiary') }}</v-btn
            >
        </v-container>
    </div>
</template>

<script>
export default {
    props: {
        dataValue: {
            require: true
        },
        dataValueOriginalCount: {
            require: true
        }
    },
    data() {
        return {
            searchKeyWord: '',
        };
    },
    methods: {
         clearFilterByKeyWord() {
            this.searchKeyWord = '';
            this.unfilterStoComponents();
        },
        globalFilter() {
            //global function which invoke all on click Search button
            if (this.searchKeyWord && this.searchKeyWord !== '') {
                this.filterByKeyWord();
            }

            this.$emit('changeData', this.dataValue);
            this.$emit('changeDataOriginal', this.dataValueOriginalCount);
        },
     
    }
};

</script>

Parent component:

<v-data-table
            :headers="headers"
            :items="stoSystems"
            v-show="isLoading"
            v-if="areResultsVisible"
            @dataValue="stoSystems = event"
            @dataValueOriginalCount="originalstoSystemsCount = event"
        >
            <template v-slot:item.name="{ item }">
                <td >
                    {{ item.name }}
                </td>
            </template>
        </v-data-table>
        <script>
export default {
    data() {
        return {

            headers: [
                {
                    text: this.$t('id'),
                    value: 'id'
                },
                {
                    text: this.$t('nav_item_systems'),
                    value: 'name',
                    sortable: false
                },
           
            ],
           Systems: [],
            originalstoSystemsCount: [],
           
        };
    },
    async mounted() {
        try {
            let res = await axios.get('blbalbla/systems');
            this.Systems = res.data;
            this.originalstoSystemsCount = res.data;
        } catch (error) {
            console.error(error);
        }
    }
};
</script>```

maxshuty maxshuty · Accepted Answer · 2020-11-19T13:04:08

All this is saying is that in your child component you should not mutate dataValue or dataValueOriginalCount directly, instead set a data property to those values and mutate your data property in your child component like this:

data() {
    return {
        originalCount: this.dataValueOriginalCount,
    };
}

Now in your child component you can use originalCount and it will have whatever value dataValueOriginalCount had.

You can mutate dataValueOriginalCount in the parent component however you want since they are not a prop at that point.

Vue 2 Avoid mutating a prop directly since the value will be overwritten

1 Answers