[Vuejs]-Can't change button text inside setTimeout function

by

1👍

✅

The function given to setTimeout does not have the same “this” as your Vue. You could use the bind function:

new Vue({
	el: '#app',
	data: {
		btntext: "OK"
	},
	methods: {
		change: function () {
			this.btntext = "cancel";
			setTimeout(function () {
				console.log("test");
				this.btntext = "text changed";
			}.bind(this), 1000);
		}
	}
})  
.mydiv{
  border: 1px black dashed;
  font-size: 2em;
}
<script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<div id="app">
  <div class="mydiv">
    <button v-on:click="change">{{btntext}}</button>
  </div>
</div>
👤Fabien

1👍

You have to understand the context of this keyword. When in setTimeout callback function, this refers to different object that this before it. To solve this issue, you should solve reference to this before the callback or if you’re going to use ES2015, you can change function () {...} with arrow function () => {...}, which will automatically save reference to outer this and use it instead of actual this inside the function. But if you’re going to use that, make sure it’s supported across all your target browsers, or alternatively use a compiler to ES5, most popular of which is Babel.

👤Marko Gresak

Leave a comment