我正在使用带有wire:ignore的tagify组件,我想在输入更改后动态更新值。 我无法更新值。
然后,当输入值更改时,我使用 JavaScript 手动触发 Livewire 操作。通过此设置,对 customInput 字段的更改将触发 handleCustomInputChange Livewire 方法,从而允许您更新 livewireManagedValue 属性。
但是没有任何作用。
这是我的刀片:
<div class="row g-3 mb-3" style="margin-top: 50px" wire:ignore>
<input type="hidden" wire:model="livewireManagedValue">
<input id="customInput" name='input-custom-dropdown' class='some_class_name'
placeholder='write some tags' value=''>
</div>
@push('body_resources')
<script src="{{ asset('assets/tagify/tagify.min.js') }}"></script>
<script>
var input = document.querySelector('input[name="input-custom-dropdown"]'),
// init Tagify script on the above inputs
tagify = new Tagify(input, {
whitelist: ["A# .NET", "PHP", "A-0 System", "A+", "A++", "ABAP", "ABC"],
maxTags: 10,
dropdown: {
maxItems: 20,
classname: "tags-look",
enabled: 0,
closeOnSelect: false
}
})
</script>
<script>
document.addEventListener('livewire:load', function() {
var customInput = document.getElementById('customInput');
customInput.addEventListener('input', function() {
// Get the value from the custom input
var value = customInput.value;
// Trigger the Livewire action with the updated value
Livewire.emit('handleCustomInputChange', value);
});
});
</script>
@endpush
在控制器中:
public $livewireManagedValue;
// Livewire method to handle changes from JavaScript
public function handleCustomInputChange($value)
{
// Update Livewire-managed value
$this->livewireManagedValue = $value;
}
解决这个问题的方法是什么?非常感谢任何帮助。
需要重新渲染子组件。 livewire 文档