Access component instance from vue watcher

Question

I'm working on a project, similar as a bill manager, so I want that the subtotal get recalculated every time that quantity or unit value change, I have tried and searched to accomplish this using watcher or computed properties, but I don't find the right approach, cause I need to access the whole scope of the element when another change, like this.

Model structure:

detail
quantity
unit value
subtotal (should be a computed or updated)

So I think I should be able of doing something like this:

    Vue.component('item', {
    template: '#item',
    props: {
      item: Object,
    },
    computed:{
        total: function(){ 
            return this.quantity*this.unit_value;
         }
    },
    watch:{
      'item.quantity':()=>{
        this.subtotal = this.quantity*this.unit_value;
      }
    }
  });

I have several components being read from a list

I merged the approach using watcher and computed in the same code to make it shorter.

The problem is that I haven't found a way to access the hole element from inside itself, anyone could pls explain the right way? thanks

" I haven't found a way to access the hole element from inside itself, " .. what do you mean by that? What do you want to access and where — samayo
– samayo, Commented Mar 29, 2018 at 18:47

acdcjunior · Accepted Answer · 2018-03-29 18:47:59Z

7

You shouldn't use arrows functions there, use method declarations.

If you want to watch for a property of the item object, you'll have to watch for the item object itself, and additionally use the deep: true flag of the watcher.

Final detail, you are using several properties that are not declared in your data. Declare them, otherwise they will not be reactive, that is, the computed will not recalculate when they change.

See code:

Vue.component('item', {
  template: '#item',
  props: {
    item: Object,
  },
  data() {
    return {
      subtotal: null,         // added data properties
      quantity: null,
      unit_value: null
    }
  },
  computed: {
    total: function() {
      return this.quantity * this.unit_value;
    }
  },
  watch: {
    item: {                          // watching for item now
      deep: true,                    // using deep: true
      handler() {                    // and NOT using arrow functions
        this.subtotal = this.quantity * this.unit_value;
      }
    }
  }
});

answered Mar 29, 2018 at 18:47

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

1 Comment

Jorge Whitte Over a year ago

Thanks, for the response.I modify it into that way, and the watcher doesn't even trigger when I change some property :/

Collectives™ on Stack Overflow

Access component instance from vue watcher

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related