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

【问题标题】：I want to integrate a laravel broadcast to update an html attribute in realtime我想集成一个 laravel 广播来实时更新一个 html 属性
【发布时间】：2019-12-10 23:22:08
【问题描述】：

进度条的 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 元素会给我带来问题。

【问题讨论】：

vuejs.org/v2/api/#v-html
作为一个新手，我真的不明白......如果你能指出我正确的方向并告诉我我做错了什么以及如何纠正它，我将非常感激。跨度>
事件中有哪些数据？你到底想更新什么？
我想用我从控制台日志中的推送器获得的数据实时更新这个 html 属性：data-value="value"，该数据名为 update。我在浏览器控制台中实时获取数据我只是不知道如何将它实时绑定到该属性
下面的答案是否解决了您的问题，还是您仍然需要帮助来设置属性？

标签： laravel vue.js pusher

【解决方案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);
});

【讨论】：

const app = new Vue({ el: '#app', created(){ Echo.channel('progress-bar-socket') .listen('ProgressUpdaterEvent', (e) => { this.value = e["update"]; console.log(e["update"]); }); }，数据：{ 总计：1500000，值：0 } });没有变化
@daqustae 属性根本不更新？还是进度条不更新？如果是进度条，请告诉我你用什么库来生成它。
每当我在数据部分的值选项中输入一个值时，属性和进度条都会在页面重新加载时更新。但它不会使用推送器的更新实时更新，而是登录到控制台
@daqustae 请你更新你的问题并添加你用来初始化进度条的代码。
哇……太棒了。除了 this.value 之外，我也可以设置 total 选项吗？