CODEWITHSUNDEEP
javascriptvue.js
ThorntonStuart
ThorntonStuart

Reputation: 139

vuejs: Update computed property when nested data changes

I have a computed property which relies on a data object updating to perform a calculation and return the value. The computed property updates whenever the first level of nesting is updated, however the computed property does not update when nested data props of the base object are updated.

I have provided the code samples below. Essentially the problem occurs when the nested properties of this.form.business_details.usage are updated. To elaborate, when this.form.business_details.quote_type updates, this.completion.business_details.quote_type also updates as the latter is dependent on the former.

However when this.form.business_details.usage.spend_type updates, the computed prop for completion() is not re-evaluated. Do computed properties not watch nested data by default? If not, how can I trigger an update?

<script>
import Form from '@/classes/Form';
import { filter, map, snakeCase } from 'lodash';

export default {
  name: 'Form',

  computed: {
    completion() {
      return {
        business_details: {
          postcode: this.generateFormCompletionObject(true, this.form.business_details.postcode),
          quote_type: this.generateFormCompletionObject(true, this.form.business_details.quote_type),
          current_supplier: this.generateFormCompletionObject(true, this.form.business_details.current_supplier),
          knows_usage: this.generateFormCompletionObject(true, this.form.business_details.knows_usage, true),
          usage: {
            spend_type: this.generateFormCompletionObject(
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.knows_usage,
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.spend_type
            ),
            billing_period: this.generateFormCompletionObject(
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.knows_usage,
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.billing_period
            ),
            amount: this.generateFormCompletionObject(
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.knows_usage,
              typeof this.form.business_details.knows_usage === 'boolean' && this.form.business_details.amount
            ),
          },
        },
      };
    },

    completionPercentage() {      
      const required = this.recursiveCompletionCheck(Object.values(this.completion.business_details))
        .flat()
        .filter(value => value)
        .map(value => +!! value.given);

      return required.filter(value => value).length / required.length * 100;
    },
  },

  data() {
    return {
      completed: {
        business_details: false,
        personal_details: false,
      },
      form: new Form({
        business_details: {
          postcode: new URLSearchParams(window.location.search).get('postcode') || null,
          quote_type: null,
          current_supplier: null,
          knows_usage: null,
          usage: {
            spend_type: null,
            billing_period: null,
            amount: null,
          },
        },
        personal_details: {
          full_name: null,
          email: null,
          phone: null,
          email_consent: false,
        },
      }),
    };
  },

  methods: {
    generateFormCompletionObject(required, key, requiresBoolean = false) {
      return {
        required: required,
        given: requiresBoolean
          ? typeof key === 'boolean' 
          : !! key,
      };    
    },

    recursiveCompletionCheck(values) {
      return values.map(value => {
        if ('required' in value && value.required) return value;
        if ('required' in value && !value.required) return null;

        if (!! Object.keys(value).length) {
          return recursiveCompletionChecker(Object.values(value));
        }

        return null;
      });
    },
  },
}
</script>

Upvotes: 2

Views: 5125

Answers (1)

n-smits
n-smits

Reputation: 713

Nested object properties aren't automatically re-evaluated. You can watch for its changes with watch. Here is the documentation for more info. The relevant part you need is:

var vm = new Vue({
  el: '#app',
  computed: {
    foo() { return this.item.foo; }
  },
  watch: {
    foo() { console.log('Foo Changed!'); }
  },
  data: {
    item: { foo: 'foo' }
  }
})

Upvotes: 5

Related Questions