Как мгновенно обновить данные sh с Laravel и vue. js?

Question

Я работаю с постоянно меняющимися данными API. Я использую Laravel и Vue. js. Когда я управляю сетью с помощью F11, поток данных стабильный. Но это не влияет на DOM.

Вот примеры кодов. Буду рад, если вы поможете.

HTML код;

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

Код сценария;

    <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

Измените вашу функцию setInterval на функцию стрелки следующим образом.

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

Вы можете установить наблюдатель для этого, чтобы иметь возможность vue наблюдать за изменениями ваших данных. вот так.

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

Или создайте вычисляемое свойство для него, чтобы обновлять значение при его изменении.

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

тогда ваш компонент должен выглядеть следующим образом

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