Is it possible to trigger a function upon a Vue data element change?

Question

My API provides me a hash which I receive as part of an AJAX call. The content of the AJAX response (which includes the hash) is updating data components in my Vue instance (so that the DOM is modified, per usual Vue usage).

I was wondering if it is possible to trigger (run) a function upon the change of a specific data element. Reactivity in Depth does not mention this and for me (please correct me if this is wrong) computedand methods are a way to indirectly provide new computed elements for the DOM (in other words, they do not start because a specific element was modified but are rather synchronisation methods between data and other variables provided to the DOM).

I was hoping for something along the lines of (this is non-working, incorrect pseudo-code, I just add it to put in context of a Vue instance):

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    functions_to_trigger_upon_an_element_change: {
      hash: function () {
        location.reload()
      }
    }
  })

The idea above would be to have location.reload() run when the value of hash changes.

Is there such a mechanism in Vue?

If there is not, I will keep the state independently of Vue and act accordingly upon its change but it would be nice to reuse the Vue watch properties to do that.

vuejs.org/v2/guide/routing.html

mplungjan
– mplungjan

2017-01-06 08:45:09 +00:00
Commented Jan 6, 2017 at 8:45 — mplungjan
– mplungjan, Commented Jan 6, 2017 at 8:45

Pedro Augusto Freitas de Souza · Accepted Answer · 2017-01-06 09:30:55Z

39

You can use a watch, like the following example:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

About your case, here is the example about how it could be implemented.

var vm = new Vue({
  el: '#demo',
  data: {
    hash: 'Foo' 
  },
  watch: {
    hash: function (val) {
      // when the hash prop changes, this function will be fired.
      location.reload()
    } 
  }
})

I hope I understood your question right.

edited Jan 6, 2017 at 9:30

answered Jan 6, 2017 at 8:52

Pedro Augusto Freitas de Souza

9607 silver badges17 bronze badges

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

3 Comments

WoJ Over a year ago

How would I fire location.reload() upon the change of, say, firstName in your example?

WoJ Over a year ago

The hash you have in your example, under watch is not related to the one under data (as far as I understand). It is a new variable (available via data.hash once it is created) and will probably overwrite the data.hash you set by default (to 'Foo'). It is not that hash is "watched" and function is triggered once it changes -- which is exactly the functionality I am looking for (but watch does not provide it)

WoJ Over a year ago

You were right, I was wrong. I just did a test in JSFiddle and it indeed works as you mentioned. Thank you very much. I will ask a separate question to exactly understand the mechanism of the getter().

DokiCRO · Accepted Answer · 2017-01-06 08:53:19Z

5

I think this should work

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })

answered Jan 6, 2017 at 8:53

DokiCRO

4,7153 gold badges22 silver badges23 bronze badges

Comments

Julian · Accepted Answer · 2021-01-13 12:00:08Z

0

You should use the this. in the example above

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          this.functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })

answered Jan 13, 2021 at 12:00

Julian

1

1 Comment

Canopus Over a year ago

Please provide a little explanation; code-only answers, even when correct, don't do much to help the OP figure out what they did wrong.

Collectives™ on Stack Overflow

Is it possible to trigger a function upon a Vue data element change?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related