Vue: Proper way to mutate props passed to component?

Question

In the pseudocode below, I have a parent component that has initial data of name and ages and I am passing them as props to child-component.

My child-component is taking them as props but what if I want to mutate the props. For example, say I want to reverse the name prop string. Or if I want to pop() the last age of the ages array? Do I have to set those props to initial data in the child component?

Parent

<template>

      <child-component :name=name :ages=ages></child-component>
</template>


data() {
    return {
        name: "Alex",
        ages: [23,41,94],
    }
}

Child

props: {
    name: {type: String},
    ages: {type: Array},
}

Then you pass them with the `.sync` modifier, e.g. `child-component :name.sync="name"` and use `this.$emit('name', newValue)` from within the child component — Ohgodwhy, Feb 24 '21 at 07:35
Does this answer your question? [Vue 2 - Mutating props vue-warn](https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn) — MAW, Feb 24 '21 at 07:42

kissu · Answer 1 · 2021-02-24T16:28:48.960

1

EDIT: can also be done in pair with computed setters like this

export default {
  props: ['propText'],
  data() {
    return {
      dataText: ''
    }
  },
  computed: {
    textValue: {
      get () {
        return this.dataText || this.propText
      },
      set (newValue) {
        this.dataText = newValue
      }
    }
  }
}

You have several ways, like using your logic into a computed (and displaying it directly), copying the prop value to a data (and mutating/working with it there) or emitting the value back to the parent for a modification into the children then.

This article of Michael Thiessen is nice about the subject: https://michaelnthiessen.com/avoid-mutating-prop-directly/

An example snippet

export default {
  name: 'ReversedList',
  props: {
    list: {
      type: Array,
      required: true,
    }
  },
  computed: {
    reversedList() {
      return this.list.reverse();
    }
  }
};

edited Feb 24 '21 at 16:28

answered Feb 24 '21 at 08:38

kissu

40,416
14
65
133

thanks @kissu. If I make it a computed property though, don't I lose the ability to mutate it within that component dynamically? Like I get I can have the computed property do something like `return this.list.reverse()` but that doesn't feel as flexible as setting it to `data` and then doing whatever I want with it at anytime – MargieFowle3 Feb 24 '21 at 16:20
You can actually do a lot of things but you can also copy it to `data` on `mounted` (I guess) or use a combo of computed setter, I just edited my answer to show an example. – kissu Feb 24 '21 at 16:29

score 0 · Answer 2 · answered Feb 24 '21 at 07:41

0

You should not mutate props in children componenets. This is not a good practice. See Vue 2 - Mutating props vue-warn

answered Feb 24 '21 at 07:41

MAW

923
8
23

The question is how to mutate props correctly. Not how to mutate props incorrectly. See [two-way binding with the .sync modifier](https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) – Ohgodwhy Feb 24 '21 at 07:52

Vue: Proper way to mutate props passed to component?

2 Answers2