Vue fails to automatically update computed properties without manual intervention

Question

Vue fails to automatically update computed properties without manual intervention

I need to trigger Vue to recalculate a computed property by adding extra rows. Here's the code snippet:

var foo = this.groups;
this.groups = {};
this.groups = foo;

You can see it in action in this fiddle: https://jsfiddle.net/8bqv29dg/. If these extra rows are not added, the available_groups property does not update.

What is causing this behavior and how can I make sure that available_groups updates along with groups?

I've already attempted to add groups to "deep-watched", but unfortunately, it didn't solve the issue.

javascript vue.js

Answer 1

Answer №1

When updating data objects in Vue, utilize $set to add a new property:

   methods: {
    add_group: function(key, name) {
      this.$set(this.groups, key, {key, name});
    },
  }

For more information on Vue reactivity, check out the details here.

Answer 2

When updating data objects in Vue, utilize $set to add a new property:

   methods: {
    add_group: function(key, name) {
      this.$set(this.groups, key, {key, name});
    },
  }

For more information on Vue reactivity, check out the details here.

Answer 3

Answer №2

Vue's reactivity system does not automatically detect new elements added to an object:

Check out this link for more information on Change Detection Caveats in Vue

To overcome this, you can either use Vue.set or reassign the entire object as shown in the example below:

new Vue({
  el: "#app",
  data: {
    groups: {1: {key: 1, label: 'Those guys'}},
  },

  computed: {
    available_groups: function() {
        return [{value: 0, label: 'Anyone'}].concat(Object.values(this.groups)); 
        },
    },
  methods: {
    add_group: function(key, name) {
        Vue.set(this.groups, key, {key: key, name: name})
    },
  }
})

Answer 4

Vue's reactivity system does not automatically detect new elements added to an object:

Check out this link for more information on Change Detection Caveats in Vue

To overcome this, you can either use Vue.set or reassign the entire object as shown in the example below:

new Vue({
  el: "#app",
  data: {
    groups: {1: {key: 1, label: 'Those guys'}},
  },

  computed: {
    available_groups: function() {
        return [{value: 0, label: 'Anyone'}].concat(Object.values(this.groups)); 
        },
    },
  methods: {
    add_group: function(key, name) {
        Vue.set(this.groups, key, {key: key, name: name})
    },
  }
})

Vue fails to automatically update computed properties without manual intervention

Answer №1

Answer №2

Similar questions

Looking to attach the "addEventListener" method to multiple elements that share the same class?

React and Express failing to display content

Transfer the values of two divs into a unified output div

implement CSS styles within a JavaScript function

What are 4 different methods to tap into app closure?

Local variables in AngularJS across multiple Angular applications

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

It is impossible to alter the data contained within the input box

Is it possible to display events on fullcalendar.io using PHP and MySQL?

Issue with Mockjax: asynchronous form submissions are not being intercepted

The issue arises when the jQuery $.get() method fails to deliver the expected response to the client, despite returning a status code of

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav

Strategies for selecting glyphs in SVG fonts based on their Unicode properties

Issue with jQuery.parseJSON causing empty data structure to return

The functionality of $j is not available

The jQuery plugin is not functioning properly on the subdomain

Creating a ReactJS table with content that updates dynamically

Sending data between Angular and Python using both strings and JSON formats

Incorporating min.js file into a ReactJS application

Maintain Bullet and Arrow Size with JSSOR Scaling Feature