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

Question

我是 Vue 新手。我挣扎并尝试了半天没有得到任何解决方案。在这里，我需要根据 ajax 响应自动更改 todos 文本。使用 setInterval 需要更新 vue 实例并更改 HTML DOM。当我更新 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>

Answer 1

this 的范围绑定(bind)到 Window 而不是您的 Vue 实例。

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

您对 axios promise 的想法是正确的，.then(response => { .. }) 使用箭头函数来保留 this 的范围，但是您没有将其应用于 setInterval。

如果出于某种原因您确实喜欢 setInterval(function() { .. }) 的外观，或者您需要 this 作为 Window 对象，您可以创建一个变量并将其分配给 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);
}