How to get computed property value into array variable

Question

I have a computed property function called: Total, this essentially calculates the name + value pairs of an array called prices, it's for a quotation form whereby a running total is added up as a user progresses through a multi-step form, values are then pushed into an array to keep things clean.

This computed property allows me to echo the total on the page which is dynamically updated without any additional code, I can simply add total using handlebars to wherever I want on my page like so: {{ total }}

The problem I'm now facing is that I also want the value of 'total' to be included in a separate array, or at least added to an array and I can't seem to get it right.

The working code which gets the values of my prices array which is by default empty is as follows:

computed: {
    total: function(){
      var total = [];
      Object.entries(this.prices).forEach(([name, value]) => {
        total.push(value)
      });
      return total.reduce(function(total, num){
        return total + num
      }, 0);
    }
  }

I want to do add something like this to my computed property:

this.quote.totalPrice = total

I've tried:

computed: {
    total: function(){
      var total = [];
      Object.entries(this.prices).forEach(([name, value]) => {
        total.push(value)
      });
      return total.reduce(function(total, num){
        return total + num
        this.quote.totalPrice = total 
      }, 0);
    }
  }

I'm not getting anything with this?

this.quote.totalPrice = total is after a return and unreachable, but you can't do this anyway. Computed properties are standalone and not meant to alter state. Why do you need to this? Either expand your computed property to include the rest of this.quote, or just fetch total when you need to construct your quote object — jpriebe
– jpriebe, Commented Feb 10, 2019 at 16:23
Like jpriebe said its not advisable to mutate data in computed. you can add a watcher for total and then assign total to quote.totalPrice inside that — Gowri
– Gowri, Commented Feb 10, 2019 at 17:00

TommyF · Accepted Answer · 2019-02-11 08:50:27Z

1

You can use a watcher to keep track of changes to your computed property and update any variables accordingly:

watch: {
  total(newTotal) {
    this.quote.totalPrice = newTotal
  }
}

answered Feb 11, 2019 at 8:50

TommyF

7,1708 gold badges39 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

How to get computed property value into array variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related