[Vuejs]-Update props value in vue

by

4👍

✅

As stated in the VueJs documentation: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

This means you should not attempt to mutate a prop inside a child
component. If you do, Vue will warn you in the console.

If you really really need to mutate the props, you can try something like:
In the child component:

props: {
  width: {
    type: [String, Number],
    default: '20px'
  }
},
computed: {
  computedWidth: {
    get(){
      return this.width
    },
    set(newValue) {
      this.$emit('widthChanged', newValue)
    }
  }
}

In the parent component:

<child-component
  :width="width"
  @widthChanged="someFunctionWhoMutateYourVar"
>

This should do the work

👤VongoSanDi

Leave a comment