I am trying to use the Symfony UX LiveComponent, firstly I tried to use the first exemple of the documentation:
// ArticleSearch.php
<?php
namespace App\Twig\Components;
use App\Repository\ArticleRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent]
class ArticleSearch
{
use DefaultActionTrait;
#[LiveProp(writable: true)]
public string $search = '';
public function __construct(private ArticleRepository $articleRepository)
{
}
public function getArticles(): array
{
return $this->articleRepository->findBy(['title' => $this->search]);
}
}
<!-- ArticleSearch.html.twig -->
<div {{ attributes }}>
<input
type="search"
data-model="search"
>
<ul>
{% for article in this.getArticles %}
<li>{{ article.title }}</li>
{% endfor %}
</ul>
</div>
The attributes are showing, but the value of $search is never updating, so nothing happends.
It happends when I use the symfony local:server:start, can it cause a problem ?
Thanks
EDIT:
Here's the content of my app.js and bootstrap.js:
// app.js
import './bootstrap.js';
/*
* Welcome to your app's main JavaScript file!
*
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './styles/app.css';
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
// bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bundle';
const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
Thanks to @JulianKoster, I realized that asset-mapper
wasn't installed, causing this issue, here is the fix:
composer require symfony/asset-mapper symfony/asset symfony/twig-pack
Read: https://symfony.com/doc/current/frontend/asset_mapper.html