Отправить Ajax-запрос после просмотра элемента пользователем

Question

Я хочу отправить ajax-запрос после того, как пользователь увидел элемент.Например, есть тег ul, который показывает список новостей, после того, как пользователь увидел элемент, он отправляет ajax-запрос для получения и отображения новостей в теге ul.

Обратите внимание, что я использую фреймворк Vuejs.

Например, что-то вроде этого:

<template>
    <div @WHEN_VIEWED="sendAjax">
        <ul v-if="news">
            <li v-for="new in news">{{ new.title }}</li>
        </ul>
        <div v-else>
            Please Wait...
        </div>
    </div>
</template>

<script>
  export default {
        name: "...",
        data() {
            return {
                news: null,
            };
        },
        methods: {
            sendAjax() {
                // Send Ajax...
            }
        }
    }
</script>

Пожалуйста, помогите, спасибо.

Answer 1

try this

<template>
    <div>
        <ul v-if="news.length">
            <li v-for="new in news">{{ new.title }}</li>
        </ul>
        <div v-else>
            Please Wait...
        </div>
    </div>
</template>

<script>
  export default {
        name: "...",
        data() {
            return {
                news: [],
            };
        },
        methods: {
            async sendAjax() {
                // Send Ajax...
            }
        },
        mounted() {
          this.$nextTick(() => {
            this.news = await this.$axios.$get(`...`)
          })
        }
    }
</script>

Answer 2

Используйте lifecycle hooks для отправки запроса в течение жизненного цикла компонента.

Для вашей проблемы я бы предложил - mounted

Установлен (DOM готов и размещен внутри страницы) запускается после того, как ваш компонент отображается в DOM.

Они позволяют вам получить доступ к вашему компоненту непосредственно до и после первого рендера. Однако они не работают во время рендеринга на стороне сервера.

Для справки - https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

<template>
    <div @WHEN_VIEWED="sendAjax">
        <ul v-if="news" v-for="new in news">
        </ul>
        <div v-else>
            Please Wait...
        </div>
    </div>
</template>

<script>
  export default {
        name: "...",
        data() {
            return {
                news: null,
            };
        },
        mounted() {
          this.sendAjax()
        },
        methods: {
            sendAjax() {
                // Send Ajax...
            }
        }
    }
</script>