Question

我已经关注了Vue-js App：

- (void)viewDidLoad {

    [super viewDidLoad];

    [self setDollar: 0];
    [self setResult: @""];
    [self ReadEuro];
}

- (void) ReadEuro
{
    Euro = [EuroValue.text floatValue];
    NSLog("Euro value is : %0.02f", Euro);
}

跑步后我得到＆＃34;测试＆＃34;在控制台上，但按钮不会将其文本更改为<html> <head> <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script> <style> .mydiv { border: 1px black dashed; font-size: 2em; } </style> <script> var App = null; // it's global because function behind will overwrite it's with Vue App instance window.onload = function() { new Vue( { el: '#app', data: { btntext: "OK" }, methods: { change: function() { this.btntext = "cancel"; setTimeout(function() {console.log("test"); this.btntext = "text changed";},1000); } } }) } </script> </head> <body> <div id="app"> <div class="mydiv"> <button v-on:click="change">{{btntext}}</button> </div> </div> </body> </html>。为什么呢？

Answer 1

您必须了解this关键字的上下文。在setTimeout回调函数中，this引用其前面this的不同对象。要解决此问题，您应该在回调之前解决对此问题的引用，或者如果您要使用ES2015，则可以使用箭头函数function () {...}更改() => {...}，这将自动保存对外部的引用this并在函数内使用它而不是实际的this。但是，如果您要使用它，请确保所有目标浏览器都支持它，或者使用编译器ES5，其中最受欢迎的是Babel。

Answer 2

给setTimeout的函数没有相同的＆＃34;这个＆＃34;作为你的Vue。你可以使用bind函数：

＆＃13;

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);
		}
	}
})

＆＃13;

.mydiv{
  border: 1px black dashed;
  font-size: 2em;
}

＆＃13;

<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>

＆＃13;

无法更改setTimeout函数内的按钮文本

2 个答案: