比较方法中的值

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>

你可以试试下面的小提琴