Vuejs computed, make it reactive

Question

I need to save the computed value in my database, but it seems i cannot access it with the following example :

computed: {
    total: {
        get: function() {
            return this.items.reduce(
                (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount/100), 0
            )
        },
        set: function(newValue) {
            console.log(newValue);
            // this.tototata = newValue;
        }
    }
},

In the template, the computed value working well, but nothing appears in the console

I'm working with vue 2.6.11

Is this the best way to do this? Should i use methods?

tony19 · Accepted Answer · 2022-07-16 01:53:34Z

1

I think the computed setter is called when manually setting the computed value. For example, the setter will be triggered if you do something like this.total = newTotal. In order to save the computed value in the database whenever it's updated, you might want to set up a watcher:

computed: {
  total: {
    get: function() {
      return this.items.reduce(
        (acc, item) => acc + (item.price * item.quantity) * (1 - item.discount / 100), 0
      )
    }
  }
},
watch: {
  total(newValue) {
    // Save to database
  }
}

You can read more about Computed Setter here. Hope that this can help you solve the problem.

edited Jul 16, 2022 at 1:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 26, 2020 at 9:48

Andrew Bui

1413 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mchev Over a year ago

Thanks, i had to put the watcher outside of the computed function but it works great.

Andrew Bui Over a year ago

Yeah sorry, it was my mistake. It should be outside indeed. Glad it helps! I updated the answer btw.

mchev Over a year ago

Still wondering why the example on the doc doesn't work vuejs.org/v2/guide/computed.html#Computed-Setter

Andrew Bui Over a year ago

You can take a look at a small example I just wrote here: jsfiddle.net/k7zw3na5/6.

Collectives™ on Stack Overflow

Vuejs computed, make it reactive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related