Vuejs event on change of element value?

Question

I have an element that I want to watch for a change like this:

<span id="slider-value-upper" class="lower">50</span> 

Is it possible to do this cleanly with vuejs? I tried looking in the docs but I could not find anything like this.

I want to launch a custom event whenever '50' changes to something else with VueJs.

Answer 1

Have you tried with watch? In your case it would be something like this.

template

<div id="app">     {{ message }}     <span id="slider-value-upper" class="lower">{{myValue}}</span><br />     <input v-model="myValue"> </div> 

js code

new Vue({     el: '#app',     data: {         message: 'Watch example',         myValue: 50     },     watch: {         'myValue': function(val, oldVal){         if (val < 50) {             this.message= 'value too low!';         }else{           this.message= 'value is ok';         }       }     } }) 

check out the example