如果修改了数据库表，则对 Vue 组件进行实时更改答案

【问题标题】：Live changes to Vue component if database table modified如果修改了数据库表，则对 Vue 组件进行实时更改
【发布时间】：2019-03-26 20:27:20
【问题描述】：

我对 Vue JS 很陌生。只是用Laravel & Vue JS 构建一个简单的应用程序来练习。

我正在寻找一些东西，以便我的 Vue 组件可以加载与 Vue 方法相关的任何更改。

模板：

<template>
    <div v-for="user in users" :key="user.id">
        {{ user.name }}
    </div>
</template>

脚本：

export default {
    data() {
        return {
            users: {},
            form: new Form({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            })
        }
    },

    methods: {
        createUser() {
            this.form.post('api/user')
                .then(response => {
                    // Success
                    fire.$emit('afterCreate');
                })
                .catch(error => {
                    // Error
                });
        },

        loadUsers() {
            axios.get('api/user').then(({ data }) => (this.users = data.data));
        }
    },

    created() {
        this.loadUsers();
        fire.$on('afterCreate', () => {
            this.loadUsers();
        });
    }
}

上面的代码工作正常。例如。当我添加新的user 时，它会加载新的users。

但是当数据库的users 表得到更新时，我想将users 加载到Vue 组件。如果有人从另一台计算机插入/更新/删除user，我应该会从我的计算机上看到更新。

就是这样！

【问题讨论】：

你的意思是实时的吗？尝试检查 Firebase 实时数据库
@SalmenBejaoui 我正在使用 MySQL

标签： javascript laravel laravel-5 vue.js vuejs2

【解决方案1】：

您可以简单地使用 websocket 来实现这一点，通过使用 socket.io 和 redis 广播您的事件

点击此链接：https://adnansabanovic.com/how-to-use-laravel-with-socket-io/

希望对你有帮助

【讨论】：