Я хотел создать и использовать 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.info("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.info(answers);
for (let i = 0; i < answers.length; i++) {
let percentage = 0;
console.info("the count", poll.pollcount);
if (poll.pollcount == 0) {
percentage = 0;
} else {
percentage = Math.round(
(poll.answerweight[i]) * 100 / (poll.pollcount)
);
console.info(i, "time", poll.answerweight[i]);
console.info("The printed percentage is ", percentage);
}
answers[i].querySelector(".percentage_bar").style.width = percentage + "%";
answers[i].querySelector(".percentage_value").innerText = percentage + "%";
}
</script>
Путем экспериментов я сделал это с помощью этого метода, пожалуйста, дайте мне знать, если вы знаете лучший метод, чем этот, или что-то, что я могу улучшить.
С помощью события диспетчера браузера я смог отправить обновленные значения, взятые из красноречивой модели.
$this->dispatchBrowserEvent('contentChanged', ['users' => $users]);
Затем я вызвал eventListener и через e.detail получил объект, который я использовал с document.getElementById моего div, а затем обновил его содержимое через
.innerHTML = e.detail.users.map(function(answer, i) {}).join("");