如何使用 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>