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

Question

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 事件，当我的网站发生某些事情时会发送该事件，它会使用我的 database.I 中的一些记录计数进行更新，并实时使用记录计数更新进度条。我可以在我的控制台中获取记录数，但是将它作为属性绑定到进度条的 html 元素给我带来了问题。

Answer 1

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

要更新属性 value 你只需要做

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

即

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

我建议你看看The series of tutorials

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

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

因此，您可以为 value 设置一个水源，或者直接将其放入您的侦听器回调中：

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

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

I want to integrate a laravel broadcast to update an html attribute in realtime

laravel

pusher

vue.js