Vue 2 - Mutating props vue-warn

Question

I started https   laracasts com series learning-vue-step-by-step series  I stopped on the lesson Vue  Laravel  and AJAX with this error      vue js 2574  Vue warn   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   list   found in component     I have this code in main js  Vue component  task         template    task-template       props    list        created             this list   JSON parse this list             new Vue       el    container       I know that the problem is in created   when I overwrite the list prop  but I am a newbie in Vue  so I totally don t know how to fix it  Anyone have an idea how  and please explain why  to fix it

User · Accepted Answer

This has to do with the fact that mutating a prop locally is considered an anti-pattern in Vue 2  What you should do now  in case you want to mutate a prop locally  is to declare a field in your data that uses the props value as its initial value and then mutate the copy    Vue component  task         template    task-template       props    list        data  function              return               mutableList  JSON parse this list                         You can read more about this on Vue js official guide    Note 1  Please note that you should not use the same name for your prop and data  i e    data  function      return   list  JSON parse this list       WRONG     Note 2  Since I feel there is some confusion regarding props and reactivity  I suggest you to have a look on this thread

User · Answer

Props down  events up  That s Vue s Pattern  The point is that if you try to mutate props passing from a parent  It won t work and it just gets overwritten repeatedly by the parent component  Child component can only emit an event to notify parent component to do sth  If you don t like these restrict  you can use VUEX actually this pattern will suck in complex components structure  you should use VUEX

User · Answer

Because Vue props is one way data flow  This prevents child components from accidentally mutating the parent   s state   From the official Vue document  we will find 2 ways to solve this problems   if child component want use props as local data  it is best to define a local data property     props    list      data  function         return         localList  JSON parse this list               The prop is passed in as a raw value that needs to be transformed  In this case  it   s best to define a computed property using the prop   s value     props    list      computed        localList  function            return JSON parse this list                eg  if you want to filter this list     validList  function            return this list filter product   gt  product isValid     true                 whatever to transform the list

User · Answer

Vue just warns you  you change the prop in the component  but when parent component re-renders   list  will be overwritten and you lose all your changes  So it is dangerous to do so   Use computed property instead like this   Vue component  task         template    task-template       props    list        computed            listJson  function                return JSON parse this list

User · Answer

You should not change the props s value in child component  If you really need to change it you can use  sync  Just like this   lt your-component  list sync  list  gt  lt  your-component gt   Vue component  task         template    task-template       props    list        created             this  emit  update list   JSON parse this list             new Vue       el    container

User · Answer

The answer is simple  you should break the direct prop mutation by assigning the value to some local component variables could be data property  computed with getters  setters  or watchers    Here s a simple solution using the watcher    lt template gt     lt input     v-model  input       input  updateInput        change  updateInput      gt    lt  template gt    lt script gt    export default     props        value          type  String        default                    data         return         input                    watch        value          handler after            this input   after                 immediate  true                methods        updateInput           this  emit  input   this input                   lt  script gt    It s what I use to create any data input components and it works just fine  Any new data sent v-model ed   from parent will be watched by the value watcher and is assigned to the input variable and once the input is received  we can catch that action and emit input to parent suggesting that data is input from the form element

User · Answer

Vue js considers this an anti-pattern  For example  declaring and setting some props like  this propsVal    new Props Value    So to solve this issue you have to take in a value from the props to the data or the computed property of a Vue instance  like this   props    propsVal    data  function        return          propVal  this propsVal          methods            This will definitely work

User · Answer

YES   mutating attributes in vue2 is anti-pattern  BUT    Just break the rules by using other rules  and go forward  What you need is adding  sync modifier to your component attribute in paret scope   lt your-awesome-components  custom-attribute-as-prob sync  value    gt    It s simple we kill the batman

User · Answer

I personally always suggest if you are in need to mutate the props  first pass them to computed property and return from there  thereafter one can mutate the props easily  even at that you can track the prop mutation   if those are being mutated from another component too or we can you watch also

User · Answer

According to the VueJs 2 0  you should not mutate a prop inside the component  They are only mutated by their parents  Therefore  you should define variables in data with different names and keep them updated by watching actual props  In case the list prop is changed by a parent  you can parse it and assign it to mutableList  Here is a complete solution   Vue component  task         template     lt ul gt                     lt li v-for  item in mutableList  gt                          item name                      lt  li gt                 lt  ul gt         props    list        data  function              return               mutableList   JSON parse this list                        watch           list  function                this mutableList   JSON parse this list                         It uses mutableList to render your template  thus you keep your list prop safe in the component

User · Answer

You can achieve 2 way data-binding in Nuxt Vue like this  Child vue  lt template gt       lt input       v-model  quot content quot          lt  -- How you choose to emit the event is up to you could be  keydown or even inside a watch prop -- gt         keyup  quot  emit  update dataFromParent   content  quot        gt   lt  template gt    lt script gt  export default     props    quot dataFromParent quot      mounted         this content   this dataFromParent         data       gt         content   quot  quot             lt  script gt   Parent vue  lt tenplate gt     lt Child  dataFromParent sync  quot text quot    gt   lt  template gt    lt script gt  import Child from  quot   components Child quot    export default     components        Child         data       gt         text   quot Hello World  quot                lt  script gt

User · Answer

I want to give this answer which helps avoid using a lot of code  watchers and computed properties  In some cases this can be a good solution   Props are designed to provide one-way communication   When you have a modal show hide button with a prop the best solution to me is to emit an event    lt button  click   emit  close    gt Close Modal lt  button gt    Then add listener to modal element    lt modal  show  show   close  show   false  gt  lt  modal gt     In this case the prop show is probably unnecessary because you can use an easy v-if  show  directly on the base-modal

User · Answer

do not change the props directly in components if you need change it set a new property like this   data          return              listClone  this list           And change the value of listClone

User · Answer

Vue component  task         template    task-template       props    list        computed          middleData             return this list                    watch          list newVal  oldVal            console log newVal          this newList   newVal                    data           return           newList                       new Vue       el    container       Maybe this will meet your needs

User · Answer

one-way Data Flow  according to  https   vuejs org v2 guide components html  the component follow one-Way  Data Flow  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  which can make your app s data flow harder to understand   In addition  every time the parent component is updates all props in  the child components 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   There are usually two cases where it   s tempting to mutate a prop  The prop is used to pass in an initial value  the child component wants to use it as a local data property afterwards  The prop is passed in as a raw value that needs to be transformed  The proper answer to these use cases are  Define a local data property that uses the prop   s initial value as its initial value   props    initialCounter    data  function        return   counter  this initialCounter       Define a computed property that is computed from the prop   s value   props    size    computed      normalizedSize  function          return this size trim   toLowerCase

User · Answer

For when TypeScript is your preferred lang  of development   lt template gt   lt span class  someClassName  gt          feesInLocale    lt  span gt   lt  template gt        Prop  default  0   fees  any      computed are declared with get before a function get feesInLocale         return this fees      and not   lt template gt   lt span class  someClassName  gt          feesInLocale    lt  span gt   lt  template gt        Prop   fees  any   0  get feesInLocale         return this fees

User · Answer

Below is a snack bar component  when I give the snackbar variable directly into v-model like this if will work but in the console  it will give an error as  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    lt template gt           lt v-snackbar v-model  snackbar  gt             text           lt  v-snackbar gt   lt  template gt    lt script gt      export default           name   loader            props                snackbar   type  Boolean  required  true               text   type  String  required  false  default                          lt  script gt    Correct Way to get rid of this mutation error is use watcher   lt template gt           lt v-snackbar v-model  snackbarData  gt             text           lt  v-snackbar gt   lt  template gt    lt script gt     eslint-disable         export default           name   loader            data       gt               snackbarData false                      props                snackbar   type  Boolean  required  true               text   type  String  required  false  default                          watch             snackbar  function newVal  oldVal               this snackbarData  this snackbarDatanewVal                           lt  script gt    So in the main component where you will load this snack bar you can just do this code     lt loader  snackbar  snackbarFlag   text  snackText  gt  lt  loader gt     This Worked for me

User · Answer

Vue js props are not to be mutated as this is considered an Anti-Pattern in Vue   The approach you will need to take is creating a data property on your component that references the original prop property of list  props    list    data         return       parsedList  JSON parse this list          Now your list structure that is passed to the component is referenced and mutated via the data property of your component  -   If you wish to do more than just parse your list property then make use of the Vue component  computed property  This allow you to make more in depth mutations to your props   props    list    computed      filteredJSONList       gt        let parsedList   JSON parse this list      let filteredList   parsedList filter listItem   gt  listItem active      console log filteredList      return filteredList         The example above parses your list prop and filters it down to only active list-tems  logs it out for schnitts and giggles and returns it   note  both data  amp  computed properties are referenced in the template the same e g    lt pre gt   parsedList   lt  pre gt    lt pre gt   filteredJSONList   lt  pre gt    It can be easy to think that a computed property  being a method  needs to be called    it doesn t

User · Answer

You need to add computed method like this      component vue  props    list    computed        listJson  function            return JSON parse this list

User · Answer

In addition to the above  for others having the following issue    If the props value is not required and thus not always returned  the passed data would return undefined  instead of empty    Which could mess  lt select gt  default value  I solved it by checking if the value is set in beforeMount    and set it if not  as follows   JS   export default           name   user register           data       gt                 oldDobMonthMutated  this oldDobMonth                      props                 oldDobMonth                dobMonths     Used for the select loop                    beforeMount                if   this oldDobMonth                  this oldDobMonthMutated                    else                 this oldDobMonthMutated   this oldDobMonth                            Html    lt select v-model  oldDobMonthMutated  id  dob months  name  dob month  gt     lt option selected  selected  disabled  disabled  hidden  hidden  value    gt   Select Month   lt  option gt     lt option v-for  dobMonth in dobMonths     key  dobMonth dob month slug     value  dobMonth dob month slug  gt       dobMonth dob month name      lt  option gt    lt  select gt

User · Answer

Adding to the best answer   Vue component  task         template    task-template       props    list        data  function              return               mutableList  JSON parse this list                         Setting props by an array is meant for dev prototyping  in production make sure to set prop types https   vuejs org v2 guide components-props html  and set a default value in case the prop has not been populated by the parent  as so   Vue component  task         template    task-template       props          list            type  String          default               return                                   data  function              return               mutableList  JSON parse this list                         This way you atleast get an empty object in mutableList instead of a JSON parse error if it is undefined

User · Answer

The Vue pattern is props down and events up   It sounds simple  but is easy to forget when writing a custom component   As of Vue 2 2 0 you can use v-model  with computed properties    I have found this combination creates a simple  clean  and consistent interface between components    Any props passed to your component remains reactive  i e   it s not cloned nor does it require a watch function to update a local copy when changes are detected   Changes are automatically emitted to the parent  Can be used with multiple levels of components    A computed property permits the setter and getter to be separately defined   This allows the Task component to be rewritten as follows   Vue component  Task         template    task-template       props    list        model            prop   list           event   listchange             computed            listLocal                get  function                     return this list                            set  function value                    this  emit  listchange   value                                       The model property defines which prop is associated with v-model  and which event will be emitted on changes   You can then call this component from the parent as follows    lt Task v-model  parentList  gt  lt  Task gt    The listLocal computed property provides a simple getter and setter interface within the component  think of it like being a private variable    Within  task-template you can render listLocal and it will remain reactive  i e   if parentList changes it will update the Task component    You can also mutate listLocal by calling the setter  e g   this listLocal   newList  and it will emit the change to the parent   What s great about this pattern is that you can pass listLocal to a child component of Task  using v-model   and changes from the child component will propagate to the top level component   For example  say we have a separate EditTask component for doing some type of modification to the task data   By using the same v-model and computed properties pattern we can pass listLocal to the component  using v-model     lt script type  text x-template  id  task-template  gt       lt div gt           lt EditTask v-model  listLocal  gt  lt  EditTask gt       lt  div gt   lt  script gt    If EditTask emits a change it will appropriately call set   on listLocal and thereby propagate the event to the top level   Similarly  the EditTask component could also call other child components  such as form elements  using v-model

User · Answer

Vue3 has a really good solution  Spent hours to reach there  But it worked really good  On parent template  lt user-name   v-model first-name  quot firstName quot    v-model last-name  quot lastName quot   gt  lt  user-name gt   The child component app component  user-name           props          firstName  String        lastName  String         template        lt input    type  quot text quot     value  quot firstName quot     input  quot  emit  update firstName      event target value  quot  gt    lt input   type  quot text quot     value  quot lastName quot      input  quot  emit  update lastName         event target value  quot  gt          This was the only solution which did two way binding  I like that first two answers were addressing in good way to use SYNC and Emitting update events  and compute property getter setter  but that was heck of a Job to do and I did not like to work so hard

User · Answer

If you re using Lodash  you can clone the prop before returning it  This pattern is helpful if you modify that prop on both the parent and child   Let s say we have prop list on component grid   In Parent Component   lt grid  list sync  list  gt  lt  grid gt    In Child Component  props    list    methods       doSomethingOnClick entry           let modifiedList     clone this list          modifiedList     uniq modifiedList     Removes duplicates         this  emit  update list   modifiedList

User · Answer

If you want to mutate props - use object    lt component  model  global price  gt  lt  component gt    component   props    model    methods      changeValue  function         this model value    new value

User · Answer

I faced this issue as well  The warning gone after i use  on and  emit  It s something like use  on and  emit recommended to sent data from child component to parent component

[javascript] Vue 2 - Mutating props vue-warn

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2