Javascript 在Vue中获得ajax响应后如何更改/触发HTML DOM_Javascript_Dom_Vue.js_Vuejs2

Javascript 在Vue中获得ajax响应后如何更改/触发HTML DOM

javascript dom vue.js vuejs2

Javascript 在Vue中获得ajax响应后如何更改/触发HTML DOM,javascript,dom,vue.js,vuejs2,Javascript,Dom,Vue.js,Vuejs2,我是Vue的新手。我挣扎了半天也没有得到任何解决。在这里，我需要基于ajax响应自动更改todos文本。使用setInterval还需要更新vue实例和更改HTMLDOM。更新todo对象时，无法自动更改DOM <div id="app"> <ul> <li v-for="question in todos.text"> {{ question.text }} </li>

我是Vue的新手。我挣扎了半天也没有得到任何解决。在这里，我需要基于ajax响应自动更改todos文本。使用setInterval还需要更新vue实例和更改HTMLDOM。更新todo对象时，无法自动更改DOM

<div id="app">
      <ul>
        <li v-for="question in todos.text">
          {{ question.text }}
        </li>
      </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return { 
                message: 'You loaded this page on ' + new Date().toLocaleString(),
               todos: 
                  { 
                    Event: 'Event1',
                    text: [
                      { text: 'Learn JavaScript1' },
                      { text: 'Learn Vue1' },
                      { text: 'Build something awesome1' }
                    ] 
                }
            }           
        },
        mounted: function() {
            setInterval(function () {
                axios({
                  method: 'post',
                  url: 'test.php',
                  data: {
                    firstName: 'Fred',
                    lastName: 'Flintstone'
                  }
                }).then(response => {
                    console.log(response.data);
                    this.todos = response.data;
                    Vue.set(this, todos, response.data ); 
                  })
                  .catch(err => {
                    console.log(err);
                  });
            }, 5000);
        }
    })
</script>




{{question.text}


var app=新的Vue({
el:“#应用程序”，
数据：函数（）{
返回{
消息：“您在“+new Date（）.ToLocalString（）上加载了此页面，
待办事项：
{ 
事件：“事件1”，
正文：[
{text:'学习JavaScript1'}，
{text:'Learn Vue1'}，
{text:'buildsomesome1'}
] 
}
}           
},
挂载：函数（）{
setInterval（函数（）{
axios({
方法：“post”，
url:'test.php'，
数据：{
名字：“弗雷德”，
姓氏：“燧石”
}
})。然后（响应=>{
console.log（response.data）；
this.todos=response.data；
Vue.set（this、todos、response.data）；
})
.catch（错误=>{
控制台日志（err）；
});
}, 5000);
}
})

此的范围绑定到Windows而不是Vue实例

mounted: function() {
  console.log(this); // Vue
  setInternval(function() {
    console.log(this); // Window
  }, 1000);
  setInterval(() => {
    console.log(this); // Vue
  }, 1000);
}

您对axios承诺的想法是正确的，

。然后（response=>{..}）

使用箭头函数来保留

此

的范围，但您没有将其应用于

设置间隔

如果出于某种原因您确实喜欢

setInterval（function（）{..}）

的外观，或者您需要

this

作为窗口对象，则可以创建一个变量，并将其分配给

setInterval

函数之外的

this

mounted: function() {
  const vThis = this; // Vue
  setInterval(function() {
    axios({..})
      .then(response => {
        vThis.todos = response.data;
        console.log(this); // Window
        console.log(vThis); // Vue
      })
      .catch(error => {

      });
  }, 5000);
}

此

的范围绑定到窗口，而不是Vue实例

mounted: function() {
  console.log(this); // Vue
  setInternval(function() {
    console.log(this); // Window
  }, 1000);
  setInterval(() => {
    console.log(this); // Vue
  }, 1000);
}