时间戳

首页 > 解决方案 > 我想集成一个 laravel 广播来实时更新一个 html 属性

laravel - 我想集成一个 laravel 广播来实时更新一个 html 属性

问题描述

进度条的 HTML

<div class="ui fluid inverted segment" id="app">
    <div class="ui small header">ONGOING GRANT ANALYSIS </div>
    <div class="ui indicating big progress" id="grantprogress" :data-total="total" :data-value="value" >
        <div class="bar">
            <div class="progress" ></div>
        </div>
    </div>
</div>

JS激活它

$('#grantprogress').progress();

VUEJS 聆听频道

const app = new Vue({
    el: '#app',
    created(){
        Echo.channel('progress-bar-socket')
        .listen('ProgressUpdaterEvent', (e) => {
            this.value = e["update"];
        console.log(e["update"]);
        });
    },
    data: {
        total: 1500000,
        value: e["update"]
    }
});

我有一个 Laravel 事件，当我的网站上发生某些事情时会发送它，它会根据我的数据库中的一些记录计数进行更新。我使用记录计数实时更新进度条。我可以在控制台中获取记录计数，但将其作为属性绑定到进度条的 html 元素会给我带来问题。

标签： laravelvue.jspusher

解决方案

:data-value="value"基本上是说属性data-value应该设置为对象value中的任何内容data。

要更新value你只需要做的财产

this.value = 'the new value of the property';

IE

created() {
    Echo.channel('progress-bar-socket')
        .listen('ProgressUpdaterEvent', (e) => {
            this.value = e["update"];
        });
},

我建议你看看系列教程

属性更改时，进度条的值不会自动更新。查看文档，更新您可以使用的值：

 $('#grantprogress').progress('set progress', this.value);

所以，你可以设置一个水，value或者直接把它放在你的监听器回调中：

Echo.channel('progress-bar-socket')
.listen('ProgressUpdaterEvent', e => {
    $('#grantprogress').progress('set progress', e.update);
});

推荐阅读