Saving components locally (vue2)

Question

Saving components locally (vue2)

Looking for help with passing data from Props to Data in vue.js? Check out this Stack Overflow discussion.

If you're running into issues, take a look at this sandbox example: https://codesandbox.io/s/u3mr8.

Concerned about side effects of copying objects when saving props into data? Learn more here.

For problems related to computed properties without setters, explore this post: Computed property with no setter.

Need advice on getting your component to render correctly? Dive into this sandbox demo: https://codesandbox.io/s/39sgo.

If you have any ideas, suggestions or tips, feel free to share! Your input is greatly appreciated.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

It seems like the error is occurring because setting the value from which the computed property is generated within the getter is not allowed. This creates a logical loop where the initial value is being modified while trying to retrieve the computed results. Instead, you can simply return the prop value when initially calling the getter (if the local value has not been set yet).

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

Additionally, in the setter, you should assign the received value instead of the prop. If you want to update the local values when the prop value changes after mounting, you should use a watcher.

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

Answer 2

It seems like the error is occurring because setting the value from which the computed property is generated within the getter is not allowed. This creates a logical loop where the initial value is being modified while trying to retrieve the computed results. Instead, you can simply return the prop value when initially calling the getter (if the local value has not been set yet).

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

Additionally, in the setter, you should assign the received value instead of the prop. If you want to update the local values when the prop value changes after mounting, you should use a watcher.

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

Saving components locally (vue2)

Answer №1

Similar questions

Component importing error with Vue-cal

My Ruby on Rails app seems to be malfunctioning in a major way

Having difficulty running lint on Vue 3 TypeScript application, but building process is successful

JSON objects not loading properly in Bootstrap table

Testing dynamic components with Vue.js: A unit testing guide

Unable to detect click event in Vue devtools

Tips for sending multiple forms and having PHP interpret it as a single form using $.ajax

Trouble encountered while trying to utilize a Promise to define a global variable

What is the best way to transfer a value from state to a function as a parameter?

Having trouble implementing a cookie on the second domain using the first domain. Can't seem to get it to work properly

Executing server side code using client data in next.jsIn next.js, executing server side code with data

Encountering an error message while trying to use `npm i`

Tips for adjusting the font size of choices within the Material UI autocomplete component

Dealing with a surprise JSON error in Express.js using Javascript

Is there a way to track and detect alterations to an element using JavaScript or jQuery

When invoking a function within another function, it is essential to ensure that both values are returned within the function

Pattern to identify a JSON string with Regular Expressions

Error: The module '../lib/cli' could not be located

The next.js code is functioning properly when run in development mode, but encounters issues when attempting

Load additional slides in bxslider, monitor when it has reached the last one