How to change/trigger HTML DOM after getting ajax response in Vue

Question

I am new to Vue. I struggling and trying last half day not got any solution. Here, I need to change todos text automatically based ajax response. Using setInterval need to update vue instance and change HTML DOM as well. When I update todo object, can't change the DOM automatically

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

this is referencing your setInternval() scope, which is Window rather than the Vue instance. — Wild Beard
– Wild Beard, Commented May 17, 2018 at 17:38

Wild Beard · Accepted Answer · 2018-05-17 17:49:54Z

The scope of this is bound to Window instead of your Vue instance.

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

You had the right idea with your axios promises, .then(response => { .. }) in using the arrow function to preserve the scope of this but you didn't apply it to setInterval.

If for some reason you really like the look of setInterval(function() { .. }), or you need this to be the Window object, you can create a variable and assign it to this outside of the setInterval function.

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

Collectives™ on Stack Overflow

How to change/trigger HTML DOM after getting ajax response in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related