How to instant data refresh with Laravel and vue.js?

Question

I work with constantly changing api data. I use Laravel and Vue.js. There is a steady stream of data when I control the network with F11. But it has no effect on the DOM.

Here are sample codes. I would be glad if you help.

HTML code;

    <div class="row">
         <div class="col-md-12">
               <p class="tv-value" v-html="totalMeetings"></p>
          </div>
    </div>

Script Code;

    <script>
        export default {
            data() {
                return {
                    totalMeetings: null
                }
            },

            created() {
                this.getPosts();
            },

            methods: {
                getPosts() {
                    axios
                        .get("/get-total-meetings")
                        .then(response => (this.totalMeetings = response.data))
                        .catch(error => {
                            this.errors.push(error);
                        });
                }
            },

            mounted() {
                setInterval(function () {
                    axios
                        .get("/get-total-meetings")
                        .then(response => (this.totalMeetings = response.data))
                        .catch(error => {
                            this.errors.push(error);
                        });
                }, 2000)
            }
        }
    </script>

Qonvex620 · Accepted Answer · 2020-01-28 13:22:07Z

1

Change your setInterval function to arrow function like this.

setInterval(() => {
       axios
            .get("/get-total-meetings")
            .then(response => (this.totalMeetings = response.data))
            .catch(error => {
            this.errors.push(error);
        });
}, 2000);

You could put a watcher for that to be able vue to watch the changes of your data. like this.

watch: {
  totalMeetings(val) {
       this.totalMeetings = val
  }
}

Or create a computed property for it to update the value when it changes.

computed: {
    total_meetings() {
       return this.totalMeetings
    }
}

then your component should look like this

<p class="tv-value" v-html="total_meetings"></p>

edited Jan 28, 2020 at 13:22

answered Jan 28, 2020 at 13:05

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gündoğdu Yakıcı Over a year ago

Sorry, It looks like the method I did and it didn't work.

Qonvex620 Over a year ago

what do you mean method you did ?

Gündoğdu Yakıcı Over a year ago

Review the code I sent. You will see there. @Qonvex206

Qonvex620 Over a year ago

Its because when you are not using arrow function in vue, then the this keyword will not work inside the function.

Qonvex620 Over a year ago

Its because when you are not using arrow function in vue, then the this keyword will not work inside the function.

Collectives™ on Stack Overflow

How to instant data refresh with Laravel and vue.js?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related