问题

Question

我将laravel与vue配合使用，我想实时更新我的数据（新帖子/项目发布时），将其添加到主页上（无需刷新）

问题

我该怎么办？

代码

my component

<div v-for="project in projects" :key="project.slug">

my script

<script>
import pagination from 'laravel-vue-pagination';
var moment = require('moment');

    export default {
        data() {
            return {
                projects: {},
                app_name: process.env.MIX_APP_NAME,
            }
        },
        mounted: function() {
            this.load();
        },
        components: {
            pagination
        },
        methods: {
            //shorting projects body
            readMore: function (text, length, suffix) {
                return text.substring(0, length) + suffix;
            },
            //getting all projects
            load: function(page = 1) {
                Vue.use(require('vue-moment'), {
                    moment
                });
                axios.get('/api/projects?page=' + page)
                .then(
                    response => {
                        this.projects =  response.data.data;
                        // timing
                        Vue.filter('timeAgo', function(value){
                            return moment(value).fromNow();
                        });
                        //adding tooltip
                        Vue.nextTick(function () {
                            $('[data-toggle="tooltip"]').tooltip();
                        });
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            },
            //numbers decimals
            formatPrice(value) {
                let val = (value/1).toFixed(0).replace('.', ',')
                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
            },
        }
    }
</script>

对不起，下面的部分（仅是为了能够发布此问题 堆栈溢出限制

............................................... ................................................... ................................................... ................................................... ..................................

Answer 1

如果希望服务器能够在有新数据时更新客户端，则需要调查Websocket。

流程为：添加了新项目，服务器上的Websocket将这个新项目作为json发送给所有客户端，客户端将该项目添加到了javascript项目列表中，vue自动更新了可见列表以反映该新项目。

>

如果不可能使用websockets，那么您只需在短计时器上运行load命令，就可以感觉到“实时的感觉”

更新Vuejs列表

问题

代码

1 个答案: