Got a js Uncaught TypeError: Cannot read properties

[rudysetiawan]

First of all , thakn you so much for the sample code here and got me to understand better :) I ran into a bug here, so the updating the field works but then the error below showed up in the console and the text field became disabled. And after updating with the new value, the new value is not displaying (so the old value is still showing)

I did modified a bit on the livewire component. I am not sure where I did wrong here. Appreciate any help if you are available. Thanks

SupportAlpine.js:315 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split') at beforeAlpineTwoPointSevenPointThree (SupportAlpine.js:315) at isHiding (SupportAlpine.js:299) at alpinifyElementsForMorphdom (SupportAlpine.js:274) at onBeforeElUpdated (index.js:479) at callHook (morphdom.js:35) at morphEl (morphdom.js:199) at morphdom.js:332 at morphEl (morphdom.js:219) at morphdom.js:463 at Component.value (index.js:386)

profile-mobile.php

`class ProfileMobile extends Component { public $origData; public $newData; public $isData; public $userid; public $field;

public function mount(User $user,$field) {
    Log::info('profile-mobile'. $user);
    $this->userid = $user->id;
    $this->field = $field;
    $this->origData = $user->{$field};
    Log::info ('Old Data '. $this->origData);
    $this->init($user);
}
public function init(User $user) {
    //$this->origData = $user->{$this->field} ?: $this->userid;
    $this->origData = $user->{$this->field};
    Log::info('updated clear '. $this->origData);
    $this->newData = $this->origData;
    $this->isData = $user->{$this->field} ?? false;

}

public function save()
{
    $user = User::find($this->userid);
    $newd = trim($this->newData);
    $user->{$this->field} = $newd ?? null;
    $user->save();

    $this->init($user);

}
public function render()
{
    return view('livewire.profile-mobile');
}

} ` and the view component:

`<div x-data=" { isEditing: false, isData: '{{ $isData }}', focus: function() { const textInput = this.$refs.textInput; textInput.focus(); textInput.select(); } } " x-cloak

<div
        class="p-2"
        x-show=!isEditing
>
    <span
            x-bind:class="{ 'font-bold': isData }"
            x-on:click="isEditing = true; $nextTick(() => focus())"
    >{{ $origData }}</span>
</div>

<div x-show=isEditing class="flex flex-col">
    <form class="flex" wire:submit.prevent="save">
        <input
                type="text"
                class="px-2 border border-gray-400 text-lg shadow-inner"
                placeholder="100 characters max."
                x-ref="textInput"
                wire:model.lazy="newData"
                x-on:keydown.enter="isEditing = false"
                x-on:keydown.escape="isEditing = false"
        >
        <button type="button" class="px-1 ml-2 text-3xl" title="Cancel" x-on:click="isEditing = false">𐄂</button>
        <button
                type="submit"
                class="px-1 ml-1 text-3xl font-bold text-green-600"
                title="Save"
                x-on:click="isEditing = false"
        >✓</button>
    </form>
    <small class="text-xs">Enter to save, Esc to cancel</small>
</div>

[rudysetiawan]

Found it. So what I did i replaced the alpine.js with the new one and it starts to work :) thanks