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

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

28.01.2020 03:46:57 Просмотров 32 Источник

Я работаю с постоянно меняющимися данными api. Я использую Ларавель и Вью.JS. Есть постоянный поток данных, когда я управляю сетью с помощью F11. Но это никак не влияет на дом.

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

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>
У вопроса есть решение - Посмотреть?

Ответы - Как мгновенно обновить данные с помощью Laravel и vue.js? / How to instant data refresh with Laravel and vue.js?

Является ответом!
Qonvex620

28.01.2020 04:05:29

Измените функцию 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>
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106018680_59949439
Извините, но похоже, что метод, который я использовал, не сработал.
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106018838_59949439
что вы имеете в виду под методом, который вы сделали ?
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106018880_59949439
Просмотрите код, который я послал. Там вы все увидите. @Qonvex206
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106018988_59949439
В чем именно ваша ошибка ?
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106019126_59949439
Нет сообщения об ошибке. Это просто не работает. Забавный :)
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106019167_59949439
проверьте мой обновленный ответ
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106019325_59949439
Я не понимаю, но это сработало!
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106019754_59949439
Это потому, что когда вы не используете функцию arrow в vue, то ключевое слово this не будет работать внутри функции.
https://stackoverflow.com/questions/59949100/how-to-instant-data-refresh-with-laravel-and-vue-js/59949439#comment106019755_59949439
Это потому, что когда вы не используете функцию arrow в vue, то ключевое слово this не будет работать внутри функции.
Закрыть X