Question

我是JS和Vue的新手，所以请耐心等待我：）

我有一个使用两个Vue组件呈现的表，它们是父组（表 - 订单）和子组（行 - 顺序）。

有一个按钮可以在表的每一行上按下，对该行执行AJAX，但是我还需要在执行操作时刷新表（父），以便它具有更新的数据

我认为我需要在子进程中使用$ emit将操作传递给父进程，但我无法使其工作。这是代码（对不起它很长，我删除了一切非必要的）;

const order = {
    template: `
        ...// table content
        <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
                                       selectedOption)">Set Advisor</button></td>
    `,

    methods: {
        // following is the method that is run when the button is pressed

        assignAdvisor(id, selectedOption) {
            axios.post('url').then(response => {
                ..// show response message
                orders.$emit('refreshAfterUpdate'); // also tried  
                                                   // this.$parent.$emit(...)
            })      
    },   
};

const orders = {
    components: { order, },

    props: {
        orders: {
            type: Object,
        },
    },

    mounted() {
        // this is basically the code that I need to re-run when button is pressed,  
        // which I have repeated below in a method
        var refresh = () => {
            axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                setTimeout(refresh, 5000);
            });
        }
        refresh();
    },

    methods: {
        refreshAfterUpdate() {
            axios.get('/admin/ajax/unassigned-orders')
            .then(response => {
            this.ordersData = response.data;
            console.log(response);
            });
        },
    }
};

new Vue({
    render(createElement) {
        const props = {
            orders: {
                type: Object,
            },
        };
        return createElement(orders, { props });
    },
}).$mount('#unassignedOrders');

我没有收到任何错误消息或任何内容 - 它只是不起作用。

由于

Answer 1

好的，谢谢@Patrick Steele，我已经弄明白了。

我没有使用$ on - oops。

在已安装的（）部分添加了代码，现在可以正常运行：

const order = {
    template: `
        ...// table content
        <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
                                       selectedOption)">Set Advisor</button></td>
    `,

    methods: {
        // following is the method that is run when the button is pressed

        assignAdvisor(id, selectedOption) {
            axios.post('url').then(response => {
                ..// show response message
                orders.$emit('refreshAfterUpdate'); // also tried  
                                                   // this.$parent.$emit(...)
            })      
    },   
};

const orders = {
    components: { order, },

    props: {
        orders: {
            type: Object,
        },
    },

    mounted() {
        // this is basically the code that I need to re-run when button is pressed,  
        // which I have repeated below in a method
        var refresh = () => {
            axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                setTimeout(refresh, 5000);
            });
        }
        refresh();

            $this.on('refreshAfterUpdate', () => {
                axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                console.log(response);
                });
            },
        },
    },


};

new Vue({
    render(createElement) {
        const props = {
            orders: {
                type: Object,
            },
        };
        return createElement(orders, { props });
    },
}).$mount('#unassignedOrders');

$从子组件发送一个事件到父组件Vue 2

1 个答案: