Javascript Vue v-if在使用interval时不影响Dom

我正在尝试使用

setInterval

进行轮询，并使用Vue有条件地呈现某些元素。但它不起作用，所以我将数据设置为

true

，但在DOM上什么也没发生

注：我在CDN中使用Vue.js，所以我的应用程序不是用VueCLI创建的

这是我的HTML：

文本

这是我的剧本。当收到状态为200的响应时，我的数据将切换为true。我可以在控制台上看到它，但我的文本不能在DOM上呈现

var-app=新的Vue({
el:“应用程序”，
数据：{
轮询：null，
showtext:false
},
方法：{
pollData（）{
this.polling=setInterval（（）=>{
axios({
方法：“获取”，
url:“https://jsonplaceholder.typicode.com/comments"
}).然后（功能（响应）{
控制台日志（响应）；
如果（response.status==200）{
this.showtext=true
}
console.log（this.showtext）
});
}, 7000);
}
},
在…之前{
clearInterval（这是轮询）；
},
创建（）{
这是pollData（）；
},
});

大概是这样的：

.then(response => {
  console.log(response);
  if (response.status == 200) {
    this.showtext = true
  }
  console.log(this.showtext)
});

---

为了访问vue实例范围，应使用箭头函数，如：

 then((response)=> { ...

或按如下方式将

此

分配给全局变量（这适用于旧浏览器）：

测试：
文本

为什么我的文本无法呈现？ 因为您在控制台上看到的

this.showtext

不是您的

$data

对象上的。。。它是一个全局变量

window.showtext

，因为

这个

被邀请到

然后

是

窗口

解决方案： 您必须将vue实例

此

绑定到

然后

：

您可以使用以下方法进行操作：

then((response) => {}) (which binds this implicitly)

或：

---

我打赌axios回调中的

this

是错误的。只需记录此，然后查看。正如您所拥有的，您无法真正判断这是否是问题所在，因为您只检查您设置的内容，而不检查它所附加的内容…感谢它工作正常。你能告诉我箭头功能的窍门是什么吗？箭头函数也可以在旧浏览器中使用？箭头函数会按词汇绑定其上下文，因此

此

实际上指的是原始上下文。在您的情况下，您丢失了指向Vue实例的

此

，但使用箭头函数可以保存该上下文以访问

showtext

属性。

    var that=this; ///<------ 
  axios({
                method: "get",
                url: "https://jsonplaceholder.typicode.com/comments"
              }).then(function(response) {
                console.log(response);
                if (response.status == 200) {
                  that.showtext = true
                }
                console.log(that.showtext)
              });

then((response) => {}) (which binds this implicitly)

then((function(response) { ... }).bind(this) )