Сравните значения в методах

Question

Я новичок в vue и пытаюсь сравнить старое значение ввода с новым значением на входе во время событий фокусировки и размытия.

У меня есть следующий код, но теперь я хочу сравнить если значения inputBefore и inputAfter равны или нет. Как это сделать, если я добавлю условие if с двумя значениями внутри функции методов, я получу ошибку.

Код можно найти здесь: https://codepen.io/eladnn/pen/mdJWmbL

methods: {
    handleFocus(inputBefore) {
    console.log(inputBefore.target.value);
},
handleBlur(inputAfter) {
    console.log(inputAfter.target.value);
}

Спасибо!

Answer 1

Просто удерживайте ввод в фокусе в отдельной переменной (здесь: inputOnFocus) и сравните это со значением размытия:

var app = new Vue({
  el: '#app',
  data: function () {
    return {
      message: 'Hello Vue!',
      input:'',
      inputOnFocus: '',
    };
  },
  methods: {
    handleFocus(inputBefore) {
      this.inputOnFocus = (inputBefore.target.value) ? inputBefore.target.value : '';
    },
    handleBlur(inputAfter) {
      if(this.inputOnFocus === inputAfter.target.value) {
        console.log('Input did not change');
      } else {
        console.log('You changed the input from "' + this.inputOnFocus + '" to "' + inputAfter.target.value + '"');
      }
    }
  }
})

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="model" @focus="f_val = model;" @blur="b_val = model; get_val()">
</div>
<script>
new Vue({
  el: "#app",
  data: {
		f_val: "",
		b_val: "",
    model:""
  },
	methods: {
		get_val() {
			console.log(`value at focus ${this.f_val} | value at blur ${this.b_val}`)
		}
	}
})
</script>

Вы можете попробовать следующее fiddle