Question

我有一个App组件

<template>
    <div id="app">
        <Component1 @addItem="addItem" />
        <Component2 :items="items" />
    </div>
</template>

<script>
import Component1 from './components/Component1'
import Component2 from './components/Component2'

export default {
    name: 'app',

    components: { Component1, Component2 },

    data: function () {
        return {
            items: [],
        }
    },

    methods: function () {
        addItem(item) {
            items.push(item)
        },
    },
}
</script>

这是我的Component2组件：

<template>
    <div>
        {{ ajax_data }}
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'Component2',

    props: ['items'],

    data: function () {
        return {
            ajax_data: null
        }
    },

    mounted () {
        this.callAJAX()
    },

    methods: {
        callAJAX() {
            axios
                .get('/api/get-some-data', {
                    params: {
                        items: items
                    }
                })
                .then((response) => {
                    this.ajax_data = response.data
                })
        },
    },
}
</script>

我想在每次添加项目时触发AJAX。我的代码存在问题，因为Component2已经挂载，并且添加项目时AJAX未运行。因此，我添加了此钩子：

updated () {
    this.callAJAX()
},

问题在于它运行无限循环。

有适当的方法吗？

Answer 1

您只需使用watcher

即可检测值是否发生了变化。

https://vuejs.org/v2/guide/computed.html#Watchers

https://vuejs.org/v2/api/#watch

根据您的情况，可以将deep属性设置为true ...

更改道具后如何触发AJAX请求？

1 个答案: