symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony

Home Page:https://ux.symfony.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: TypeError: Cannot read properties of undefined (reading '0')

marcteyssier opened this issue · comments

Hi,

I am using symfony/ux-live-component 2.17.0.
I found a bug when I use an array LiveProp in a sub component.
I have the error TypeError: Cannot read properties of undefined (reading '0') .

If I call child component in my template is Ok, but if I call the parent component in my template I have the error.

To reproduce :
Component Index.php

<?php
namespace App\Component\Cram;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class Index
{
    use DefaultActionTrait;
}

Component Index.html.twig

<div{{ attributes }}>
    <twig:Child/>
</div>

Component Child.php

<?php
namespace App\Component;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class Child
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public array $list = [];

    public function mount() {
        $this->list[] = ['comment' => 'test'];
    }
}

Component Child.html.twig

<div{{ attributes }}>
    <input data-model="list[0].comment"/>
</div>

The fully error is:
TypeError: Cannot read properties of undefined (reading '0')
at parseDeepData (live_controller.js:400:44)
at getDeepData (live_controller.js:389:44)
at ValueStore.get (live_controller.js:430:16)
at ValueStore.has (live_controller.js:433:21)
at live_controller.js:2707:38
at NodeList.forEach ()
at SetValueOntoModelFieldsPlugin.synchronizeValueOfModelFields (live_controller.js:2689:60)
at SetValueOntoModelFieldsPlugin.attachToComponent (live_controller.js:2683:14)
at Component.addPlugin (live_controller.js:1931:16)
at live_controller.js:3109:28

Regards
Marc

First thing, you need to type your array :)

Second thing, your dont have any model list[0].comment , you have a model "list" ... so you should do a nested collection here.

Indeed, if we want to make it cleaner, it is recommended to type the array.

But in my main template, if I import twig:Child/ this works without error.
If I use twig:Index/ this display an error. I don't think is because my array has no type.