Changing a property of an object in child component using VueJs

Question

I have a simple question but I can't find the answer to it. This code (that belongs to a child component? is a good practice?

 export default {
  name: 'Wish',
  props: ['wish'],
  data () {
    return {
      isEditing: false
    }
  },
  methods: {
    completeWish () {
      this.wish.done = true
    },
   ...

Or I should update the done property of wish object in the parent using emit?

Thanks

Answer 1

As Amade mentioned is a bad practice.

You should use events in order to accomplish it properly from a design point of view.

<script>
  export default {
    name: 'Wish',
    props: ['wish'],
    methods: {
      completeWish () {
        this.$emit('wish-is-completed')
      }
    }
  }
</script>

And then in parent you have v-on:wish-is-completed="handleCompletedWish" like:

// Parent template
<template>
  <wish v-on:wish-is-completed="handleCompletedWish"></wish>
</template>

EDIT:

I understand the answer was downvoted because you actually are able to mutate properties of props (not a direct prop reference) and don't get a warn when you do that.

Does it mean you should do that?

No.

Props are created for one-directional data flow purpose. When you mutate props to notify a parent of something, it quickly leads to having hard to maintain state changes, because they are not implicit. Use events for child->parent communication as official documentation suggest in such cases.

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

Answer 2

Vue docs advise against mutating the props in the child component:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

So based on this I would tend to say it's a bad practice.