I have a puted property which relies on a data object updating to perform a calculation and return the value. The puted property updates whenever the first level of nesting is updated, however the puted 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, thispletion.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 puted prop for pletion() is not re-evaluated. Do puted 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',

  puted: {
    pletion() {
      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
            ),
          },
        },
      };
    },

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

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

  data() {
    return {
      pleted: {
        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>

I have a puted property which relies on a data object updating to perform a calculation and return the value. The puted property updates whenever the first level of nesting is updated, however the puted 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.pletion.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 puted prop for pletion() is not re-evaluated. Do puted 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',

  puted: {
    pletion() {
      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
            ),
          },
        },
      };
    },

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

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

  data() {
    return {
      pleted: {
        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>

• javascript
• vue.js

1 Answer 1

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',
  puted: {
    foo() { return this.item.foo; }
  },
  watch: {
    foo() { console.log('Foo Changed!'); }
  },
  data: {
    item: { foo: 'foo' }
  }
})