Livewire Trix reset vaule

I have Trix working with Livewire. The only issue I'm running into is running reset on the $body value on save. Below in the Livewire Component I try and reset the body, but the previous text stays in Trix on Save. Also tried running reset on the initialValue, but no luck.

Does anyone have any advice on how this would work?

Here is the code:

View:

<input wire:model.lazy="title" type="text" name="title" id="title"
                                           autocomplete="title"
                                           class="tailwind">

<x-trix wire:model.defer="body" id="body" :initial-value="$body"/>

Component:

@props(['initialValue' => ''])
<div
    class="rounded-md shadow-sm"
    wire:ignore
    {{ $attributes }}
    x-data
    @trix-blur="$dispatch('change', $event.target.value)"
>
    <input id="x" value="{{ $initialValue }}" type="hidden" name="body">

    <trix-editor input="x"
                 class="tailwind classes"></trix-editor>
</div>

Livewire Component:

    public Info $info;
    public $title;
    public $body;
    public $publish;
    public $initialValue;

    public function save()
    {
        $title = $this->title;
        $body = $this->body;
        $publish = (int) $this->publish;

        if ($publish !== 1){
            $publish = 0;
        }else{
            $publish = 1;
        }

        try {
            $info = Info::create([
                'title' =>$title,
                'body' => $body,
                'publish' => $publish,
            ]);
            request()->session()->flash(
                'success',
                'Your article has been created!'
            );
            $this->reset([
                'title',
                'body',
                'publish'
            ]);
           // return redirect()->route('info.create'); // I'm currently doing this to simply refresh the entire page, but defeats the purpose of using Livewire IMO.
        }catch (Exception $e){
            request()->session()->flash(
                'error',
                'Your article did not save.'
            );
        }
    }

    public function render()
    {
        return view('livewire.xxx-create');
    }

yanikkumar

2 years ago

Level 1

I am in the same situation right now... For me I just tried some trick to reset the value in the trix-editor. Definitely wire:ignore is needed so that the editor won't mess up.

I tried wrapping the content parent <div> with a random id with wire:key.

<div wire:key="{{ $trixId }}">
     <div class="form-floating mb-3" wire:ignore>
        <input type="hidden" id="{{ $trixId }}" value="{{ $body }}" />
        <trix-editor input="{{ $trixId }}" wire:ignore x-on:trix-change="$wire.body= 
              $event.target.value"></trix-editor>
     </div>
 </div>

I don't know if this approach is fully right or not. Basically what it does is upon saving the form and dispatching any event you can reinitialize the trix-editor back to the initial state and even the input has wire:ignore the new $trixId for the new input field therefore making changes to the field and setting the field as blank and the form can be reused for new inputs as well.

I was not using alpine for this so I did it in this way.

Dispatch value from the livewire Class after saving the form:

$this->dispatch('formSaved");

trying to set back the trix-editor:

$wire.on("formSaved", (event) => {
    var trixEditor = document.getElementById("{{ $trixId }}")
    addEventListener("trix-blur", function(event) {
      @this.set('body', trixEditor.getAttribute('value'))
     })
   })

Please or to participate in this conversation.