Why use input event can't update input value?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Can't Update Input Value</title>
</head>
<body>
<div id="app">
	<input type="text" ref="input" v-bind:value="something" v-on:input="format($event.target.value)" style="border-style: solid;border-color: red;">
</div>

<script>
var app = new Vue({
	el: '#app',
	data: {
		something: 123
	},
	methods: {
		format: function( sValue ) {
			var formattedValue = sValue
				.trim()
				.slice(0, sValue.indexOf('.') + 3);

			// this.$refs.input.value = formattedValue; // works
			this.something = formattedValue; // no
			Vue.nextTick(function () {}); // still no use
			console.log( 'something = ' + this.something  );
		}
	}
});
</script>
</body>
</html>

When input more than two decimal places, the data did change, but not the input value.

After 2 decimals nothing changes. Your slice() is extracting everything between 0 and + 3 “indexes” after comma, so basically everything between 1st number and 3nd number after comma is being cut (including the 3rd number).

I knew that. But after I’ve changed data.something, it didn’t update the DOM, even I used the nextTick function.

I’m not 100% sure what you mean, but v-model may help achieve what you want. If that’s not what you are looking for, maybe someone else will be able to help.

By the way, you shouldn’t be altering refs.

It does. I just see the code on Form-Input-Components-using-Custom-Events . And I just changed v-on:input value to a function, then something wrong.

Sorry for digging up this ancient thread. I’ve currently run into exactly the same issue, and I’ve figured out several solutions for this. Since I’ve also seen someone else was asking the same question in the GitHub issues (https://github.com/vuejs/vue/issues/11621), so I guess it might be worth to mention it again.

The reason why the input is not reflecting the data field is because the data field is not updating. The story goes like this:

  1. user types some character in the input field;
  2. DOM value field updated;
  3. input event triggered, and handler called;
    • Until now no one has updated the value in the data field, the data field still have the old value;
  4. handler calculates the “new value” of the data field, which is exactly the same as before;
  5. according to the reactivity mechanism of Vue, if a data field is not updated, then the DOM will also not being re-rendered. So no one is re-rendering input field, thus input field will keep the current DOM value.

Besides adding ref to the input or calling the $forceUpdate() method, I’ve figured out two alternative way to solve this problem (https://jsfiddle.net/kc21oLw8/ , the 2nd and the 3rd inputs). Both of them is trying to update the data field with the newest DOM value first, and then update it back to the previous value. This will kinda “force” updating the input component.