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>

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