Storing props locally (vue2)

Question

Following:

Passing data from Props to data in vue.js

I have:

which gives the following warning:

(the idea is to avoid mutating props). What side effects can happen in a straightforward copy object operation? I don't get it. The function just saves props into data.

Drag and drop fails with:

Do you really need a setter for a computed prop?

Looking at:

Computed property was assigned to but it has no setter - a toggle component

I've come up with:

https://codesandbox.io/s/39sgo

which is great, no warnings, no errors; it's just that the component no longer renders (fails to get data saved from prop).

Any ideas/suggestions/help/advice would be really, really awesome.

Igor Moraru · Accepted Answer · 2021-06-17T13:52:56.003

1

I think the error is thrown because it is not allowed to set within the getter the value from which the computed property is generated. It is a logical loop to modify the initial value while getting the computed results. Instead you can just return the prop value on initial call to getter (if the local value is not yet set).

  get() {
    if (!this.itemSectionPropsLocal["itemSectionCategory"]) {
      return Object.assign({}, this.itemSectionProps)[
        "itemSectionCategory"
      ];
    }
    return this.itemSectionPropsLocal["itemSectionCategory"];
  },
  set(value) {
    this.itemSectionPropsLocal = value;
  },

Also, in setter, you should assign the received value not the prop. If you want to update the local values if the prop value changes after mount you should use a watcher.

watch: {
  itemSectionProps: {
    deep: true,
    handler(val){
      this.getPropsLocal = Object.assign({}, val["itemSectionCategory"])
    }
  }
}

edited Jun 17 '21 at 13:52

answered Jun 17 '21 at 12:51

Igor Moraru

7,089
1
12
24

The setter feels unnatural; why is it needed since the computed function returns the object to be used in the template? Is there any instance where it's (can be) called? Does the deep: true field indicate a deep copy of the props into the local props? I don't get the watcher's syntax; basically it watches for changes of `itemSectionProps`, if they change `handler` is called; changes are in `val` , `val` is copied locally and `this.getPropsLocal` calls the setter of the computed function? Is my assumption remotely accurate? – Sebi Jun 17 '21 at 18:47
Just realize that category (Books/Movies in the example) does not work when using computed + local data. – Sebi Jun 17 '21 at 18:57
1

the setter is called internally when you assign to the computed prop. usually in this scenario (creating local data from propData) you first change local data (that's when the setter comes in play, and that's why the error with drag and drop), then emit changes (if needed). The `deep` in watcher means that it watches for deep changes in the object. the rest of your assumptions about watcher are correct. – Igor Moraru Jun 17 '21 at 20:09

Storing props locally (vue2)

1 Answers1