Laravel，使用 livewire 更新我通过脚本呈现的统计数据答案

【问题标题】：Laravel , use livewire to update my statistics that are render through scriptLaravel，使用 livewire 更新我通过脚本呈现的统计数据
【发布时间】：2022-11-24 10:55:30
【问题描述】：

我想创建并使用 livewire 来刷新我的统计页面，该页面显示有多少人投票，这是我通过首先从控制器获取数据然后使用 javascript 在我的页面上显示它而创建的。我面临的问题是我知道 livewire 只运行一次脚本，所以我不确定如何让它重新运行脚本。

这是我的刀片文件

<body onload="showresults()">
    <form method="post" action="{{ route('event-poll-post') }}" 
      id="message">
        @csrf
        <div class="poll">
            <div class="question"></div>
            <div class="answers"></div>
            @if ($question != null)
                <input type="hidden" name="question" value="{{ $question->id }}" required>
            @else
                <h1 style="text-align: center;">The Polling is Closed</h1>
                <br>
            @endif
            <input type="hidden" name="answer" id="answer" value="sssss" required>
        </div>
    </form>

</body>

    <script>
    var question = @json($question);

    var answer1 = @json($answer1);
    var answer2 = @json($answer2);
    var answer3 = @json($answer3);
    var answer4 = @json($answer4);
    var answer5 = @json($answer5);
    var answer6 = @json($answer6);


    var countAnswers = [answer1, answer2, answer3, answer4, answer5, answer6];
    var total = answer1 + answer2 + answer3 + answer4 + answer5 + answer6;

    console.log("PRINT OUT TOTAL", total);
    var questionAnswers = [question['a'], question['b'], question['c'], question['d'], question['e'], question['f']];

    const results = questionAnswers.filter(element => {
        return element !== '';
    });

    let poll = {
        // question: 'Question ' + question['id'].toString() + '\n\n ' + question['question'],
        question: 'Poll ' + '\n\n ' + question['question'],
        answers: results,
        pollcount: total,
        answerweight: countAnswers,
        selectanswer: -1
    };

    let polldom = {
        question: document.querySelector(".poll .question"),
        answers: document.querySelector(".poll .answers")
    };

    polldom.question.innerText = poll.question;
    polldom.answers.innerHTML = poll.answers.map(function(answer, i) {

        return (
            `
        <div class="answer-text">${answer}</div>
        <div class="answer" onclick="">
        <span class="percentage_bar"></span>
        <span class="percentage_value"></span>
        </div>
        
        `
        );
    }).join("");
    function showresults() {
        let answers = document.querySelectorAll(".poll .answers .answer");
        // console.log(answers);
        for (let i = 0; i < answers.length; i++) {

            let percentage = 0;
            console.log("the count", poll.pollcount);
            if (poll.pollcount == 0) {
                percentage = 0;
            } else {
                percentage = Math.round(
                    (poll.answerweight[i]) * 100 / (poll.pollcount)
                );
                console.log(i, "time", poll.answerweight[i]);
                console.log("The printed percentage is ", percentage);
            }

            answers[i].querySelector(".percentage_bar").style.width = percentage + "%";
            answers[i].querySelector(".percentage_value").innerText = percentage + "%";

        }
    </script>

【问题讨论】：

标签： laravel laravel-livewire polling

【解决方案1】：

通过实验，我通过这种方法做到了，如果你知道比这个更好的方法或者我可以改进的东西，请告诉我。

通过调度浏览器事件的帮助，我能够调度从雄辩模型中获取的更新值

$this->dispatchBrowserEvent('contentChanged', ['users' => $users]);

然后我调用了 eventListener 并通过 e.detail 获取了我与 div 的 document.getElementById 一起使用的对象，然后通过更新它的内容

.innerHTML = e.detail.users.map(function(answer, i) {}).join("");

【讨论】：