Как изменить / вызвать HTML DOM после получения ответа Ajax в Vue

Question

Я новичок в Vue.Я изо всех сил пытался последние полдня не получить никакого решения.Здесь мне нужно изменить текст todos автоматически на основе ответа ajax.При использовании 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 привязана к Window вместо вашего экземпляра Vue.

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

У вас была правильная идея с вашими аксиос обещаниями, .then(response => { .. }) при использовании функции стрелки для сохранения области действия this, но вы не применили ее к setInterval.

Если по какой-то причине вам действительно нравится внешний вид setInterval(function() { .. }) или вам необходимо this в качестве объекта Window, вы можете создать переменную и присвоить ей this вне функции setInterval.

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