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事件，当我的网站上发生某件事时发送该事件，它会使用数据库中的某些记录计数进行更新。我会使用记录计数实时更新进度条。我可以在控制台中获取记录计数，但是将其作为属性绑定到进度栏的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属性

1 个答案: