Html-поля в livewire не обновляют данные
public function removeCoreFunction($index){
unset($this->coreFunctions[$index]);
$this->coreFunctions = array_values($this->coreFunctions);
}
Итак, у меня есть эта функция, которая удаляет определенный индекс из coreFunctions и снова делает его значением массива. В этой функции он работает так, как я ожидал, однако в моем блейд-файле он не обновляет реальные данные для этого индекса.
<textarea type = "text" rows = "10" id = "coreFunctions_{{$index}}_accomp"
name = "coreFunctions[{{$index}}][accomp]"
wire:model.blur = "coreFunctions.{{$index}}.accomp"
class = "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
Я уже пробовал .live и т. д.
Ответы 2
Контекст не совсем ясен, так как мы не можем видеть соответствующие части класса и представления, поэтому я попробую вывести некоторые элементы.
Если предполагаемый сценарий не отражает вашу ситуацию, опубликуйте соответствующие части занятия и просмотрите его.
Поскольку существует $Index, я предполагаю, что существует цикл, отображающий некоторые элементы массива. Я предполагаю, что также есть кнопка удаления (или ее эквивалент), которая вызывает функцию removeCoreFunction() для удаления строки из массива.
«Строки», отображаемые циклом, должны содержаться в теге с уникальным проводом:ключом (уникальным в абсолютном смысле, в DOM, а также в наборе данных), чтобы позволить Livewire понять, какую строку обновлять в DOM.
Индекс массива, поскольку он уплотняется функцией array_values(), не является хорошим кандидатом (индексы переназначаются).
У вас есть несколько вариантов провода:key:
- вы можете использовать столбец идентификатора, если он доступен
- вы можете продолжать использовать $index, но не можете его сжать (в лучшем случае вы можете изменить порядок строк, если это необходимо)
Это гипотетическая часть представления, использующая $index в качестве провода:ключ:
<div>
@foreach ($coreFunctions as $index => $c)
<div wire:key = "coreFunc-{{ $index }}"> // index as key
<textarea rows = "10"
wire:model.blur = "coreFunctions.{{$index}}.accomp"
class = "block ...."
>{{ $c->accomp }}</textarea>
<button wire:click = "removeCoreFunction({{ $index }})">
[Delete]
</button>
</div>
@endforeach
</div>
Соответствующая функция removeCoreFunction() становится:
public function removeCoreFunction($index){
unset($this->coreFunctions[$index]);
}
Если вместо этого у вас есть столбец с уникальным идентификатором:
<div>
@foreach ($coreFunctions as $index => $c)
<div wire:key = "coreFunc-{{ $c->id }}"> // id column as key
<textarea rows = "10"
wire:model.blur = "coreFunctions.{{$index}}.accomp"
class = "block ...."
>{{ $c->accomp }}</textarea>
<button wire:click = "removeCoreFunction({{ $index }})">
[Delete]
</button>
</div>
@endforeach
</div>
Соответствующая функция removeCoreFunction() может быть такой же, как и выше, которая использует unset(), или, если вы хотите, чтобы индексы были смежными, ее можно упростить следующим образом:
public function removeCoreFunction($index)
{
array_splice ($this->coreFunctions, $index, 1);
}
Я просто использовал событие отправки и позволил javascript обрабатывать обновление значений внутри полей html.
но спасибо за ваш ответ. Я узнал другой подход, как решить эту проблему.
Я добавил это в свою общедоступную функцию RemoveCoreFunction:
$this->dispatch('update-supportive-functions', [json_encode($this->supportiveFunctions, true)]);
и я добавил это в свой блейд-файл
<script>
document.addEventListener('livewire:init', () => {
Livewire.on('update-core-functions', (data) => {
// Parse the JSON data into a JavaScript array
const dataArray = JSON.parse(data);
// Iterate over the array elements
dataArray.forEach((element, index) => {
document.getElementById('coreFunctions_' + index + '_output').value = element.output;
document.getElementById('coreFunctions_' + index + '_indicator').value = element.indicator;
document.getElementById('coreFunctions_' + index + '_accomp').value = element.accomp;
document.getElementById('coreFunctions_' + index + '_Q').value = element.Q;
document.getElementById('coreFunctions_' + index + '_E').value = element.E;
document.getElementById('coreFunctions_' + index + '_T').value = element.T;
document.getElementById('coreFunctions_' + index + '_A').value = element.A;
document.getElementById('coreFunctions_' + index + '_weight').value = element.weight;
document.getElementById('coreFunctions_' + index + '_remarks').value = element.remarks;
});
});
});
</script>
Это невозможно вывести из нескольких строк кода в вопросе.
да, извини, извини, что не объяснил хорошо, но спасибо за твой труд
Единственная проблема заключалась в том, что livewire не обновлял поле в реальном времени. Я не знаю причину, почему он не обновляет значения внутри поля, но обновляются любые переменные, находящиеся за пределами полей html. В любом случае, я решил это, отправив событие.