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

在组件生命周期中使用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>

Answer 2

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>

用户看到元素后发送Ajax请求

2 个答案: