Laravel中使用Livewire刷新JS渲染投票统计页面的脚本执行问题

Livewire的DOM更新机制不会自动重新执行页面初始加载时的JavaScript代码，这就是你的投票统计页面只渲染一次的原因。要解决这个问题，你需要将脚本逻辑封装为可复用函数，并通过Livewire的生命周期事件触发重新执行。

步骤1：重构JavaScript代码为可复用函数 #

把原来的全局变量初始化、DOM渲染、百分比计算逻辑全部封装到独立函数中，避免依赖全局状态：

function initPoll() {
    // 获取最新的Livewire传递的数据
    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 = countAnswers.reduce((sum, num) => sum + num, 0);

    // 过滤空选项
    var questionAnswers = [question['a'], question['b'], question['c'], question['d'], question['e'], question['f']];
    const results = questionAnswers.filter(element => element !== '');

    // 构建投票数据对象
    let poll = {
        question: 'Poll \n\n ' + question['question'],
        answers: results,
        pollcount: total,
        answerweight: countAnswers,
        selectanswer: -1
    };

    // 更新DOM元素
    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">
                <span class="percentage_bar"></span>
                <span class="percentage_value"></span>
            </div>
        `;
    }).join("");

    // 渲染百分比结果
    showresults(poll);
}

function showresults(poll) {
    let answers = document.querySelectorAll(".poll .answers .answer");
    for (let i = 0; i < answers.length; i++) {
        let percentage = 0;
        if (poll.pollcount > 0) {
            percentage = Math.round((poll.answerweight[i] * 100) / poll.pollcount);
        }

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

步骤2：添加Livewire事件监听 #

通过监听Livewire的生命周期事件，确保页面加载和每次Livewire刷新时都执行初始化函数：

// 页面首次加载时初始化投票
document.addEventListener('DOMContentLoaded', function() {
    initPoll();
});

// Livewire每次更新DOM后重新初始化投票
document.addEventListener('livewire:update', function() {
    initPoll();
});

步骤3：清理冗余代码 #

移除页面中的body onload="showresults()"，因为现在初始化逻辑已经包含了百分比渲染，无需单独触发。

关键说明 #

• livewire:update事件会在Livewire完成DOM更新后触发，此时@json($question)等变量已经是最新值
• 将showresults()改为接收poll参数，避免依赖全局变量，保证每次执行都使用最新数据
• 使用reduce简化总票数计算，让代码更简洁

内容的提问来源于stack exchange，提问作者Harvir