Vuejs event on change of element value?

javascript element vue.js
Stephan-v picture Stephan-v · Jan 11, 2016 · Viewed 56.4k times · Source

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

Yerko Palma picture Yerko Palma · Jan 11, 2016

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

Related questions

Deleting array elements in JavaScript - delete vs splice

What is the difference between using the delete operator on the array element as opposed to using the Array.splice method? For example: myArray = ['a', 'b', 'c', 'd']; delete myArray[1]; // or myArray.splice (1, 1); Why even have the splice method if …

Read More
How can I check if an element exists in the visible DOM?

How do you test an element for existence without the use of the getElementById method? I have set up a live demo for reference. I will also print the code on here as well: <!DOCTYPE html> <html&…

Read More
Getting DOM element value using pure JavaScript

Is there any difference between these solutions? Solution 1: ...and Solution 2: function doSomething(id) { var value = document.getElementById(id).value; console.log(value); //... } <input id="theId" value="test" onclick="doSomething(this.id)" />

Read More