VueJs - Method with old and new value of input

Question

TEMPLATE :

<input type="number" min="0" class="form-control" @change="get_values($event)" v-model="value" required />

STATE :

data(){
  return {
    value: ""
  }
}

METHOD :

get_values (event) {
   var value = event.target.value
}

I get the current value but i didn't find how to get the old value when i add +1 in my input

Any ideas ?

I ask if you know how to get an old value (for exemple i have a number 2 i add one and it return to me (2 and 3) because old and new — LucasLaurens, Jan 16 '20 at 16:42
if watcher is not an option, check this: https://stackoverflow.com/questions/42197822/vuejs-get-old-value-when-on-change-event — AT82, Jan 16 '20 at 16:48
Does this answer your question? [Vuejs get old value when on change event](https://stackoverflow.com/questions/42197822/vuejs-get-old-value-when-on-change-event) — Trevor, Jan 16 '20 at 16:49
actually my value is in a loop so i can't really add a watcher this is like return { data: [{value: ' ' }] } so i tried with a method. this an array so i need to create a loop for each value in array — LucasLaurens, Jan 16 '20 at 16:54
@LucasLaurens Sounds like we need more code in your question to explain your specific need. — Trevor, Jan 16 '20 at 16:57

score 3 · Answer 1 · answered Jan 16 '20 at 16:44

3

If you just need the old value whenever the input is updated, use a watcher, you don't need to listen to events:

export default {
    data() {
        return {
            value: ""
        }
    },
    watch: {
        value(newValue, oldValue) {
            console.log("You now have the new value: ", newValue, "and the old value: ", oldValue);
        }
    }
}

answered Jan 16 '20 at 16:44

gabriel.hayes

2,267
12
15

is it possible with a method ? – LucasLaurens Jan 16 '20 at 16:46
Not really. You should use a `watcher` as it is specifically designed for the use-case you have (you need to observe changes in a value and perhaps differences between those changes) – gabriel.hayes Jan 16 '20 at 16:47
ok thank you for your answer – LucasLaurens Jan 16 '20 at 16:48

Mark · Answer 2 · 2020-01-16T16:56:17.667

You can implement a v-model with a set() get() methods. This will allow a lot of flexibility in how the values are set. It will allowing you to set the data to something other than what was entered based on conditions:

var app = new Vue({
  el: '#app',
  data(){
    return {
      value: ""
    }
  },
  computed:{
    values: {
      get(){return this.value},
      set(v){
        console.log('old:', this.value)
        // loop values -- only allow 0-9
        this.value = v < 10 ? v : 0
        console.log('new:', this.value)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" min="0" class="form-control"  v-model="values" required />
 </div>

score 1 · Answer 3 · answered Jan 16 '20 at 16:46

1

You can try it with a watcher:

data(){
  return {
     value: ""
  }
},
watch: {
   value:function(newValue, oldValue){
      console.log(newValue)
      console.log(oldValue)
   }
}

its important that the watch method has the same name as your value defined in the data properties.

answered Jan 16 '20 at 16:46

bill.gates

14,145
3
19
47

is it possible with a method ? – LucasLaurens Jan 16 '20 at 16:46
what do you want to achive, maybe i can help you if i know ur problem – bill.gates Jan 16 '20 at 16:47
actually my value is in a loop so i can't really add a watcher this is like return { data: [{value: ' ' }] } so i tried with a method – LucasLaurens Jan 16 '20 at 16:50
@LucasLaurens What kind of a loop? – gabriel.hayes Jan 16 '20 at 16:52
i still dont know what you want to achive – bill.gates Jan 16 '20 at 16:53
this an array so i need to create a loop for each value in array – LucasLaurens Jan 16 '20 at 16:54

score 1 · Answer 4 · answered Jan 16 '20 at 16:56

1

You can also use getter and setter:

data(){

    return {
      value_: 2,
      get value() {
        return this.value_
      },
      set value(val){
        console.log(/*new*/val, /*old*/this.value_)
        this.value_ = val
      }
    }
  },

answered Jan 16 '20 at 16:56

Estradiaz

3,483
1
11
22

seems correct i'll try thank you ;) – LucasLaurens Jan 16 '20 at 16:58
https://jsfiddle.net/fa0m9ktd/ – LucasLaurens Jan 16 '20 at 17:02
I tried the same things with computed i think it's correct – LucasLaurens Jan 16 '20 at 17:05

VueJs - Method with old and new value of input

4 Answers4