symfony ux-live

Question

please can someone help me with ux-live-component even tho i executed the commands : composer require symfony/ux-twig-component composer require symfony/ux-live-component composer require symfony/webpack-encore-bundle npm install --force npm run build

every live component or autocomple... it just dosent work for exemple im trying to make a search bar as in the code bellow but the $query value just stays on '' it dosent update as i type

{# src/components/blogpostsearch.html.twig #}
<?php

namespace App\Components;

use App\Repository\BlogRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;
use Symfony\UX\LiveComponent\Attribute\LiveProp;

#[AsLiveComponent('blogpost_search')]
class BlogpostSearchComponent
{
    use DefaultActionTrait;

    #[LiveProp(writable: true)]
    public string $query = '';

    public function __construct(
        private BlogRepository $blogRepository
    ) {
    }

    public function getBlogposts(): array
    {
        return $this->blogRepository->findByQuery($this->query);
    }
}

{# templates/components/blogpostsearch.html.twig #}
<div {{ attributes }} class="m-4">
    <input
        type="search"
        name="query"
        value="{{ query }}"
        data-action="live#update"
        id="searchInput"
    >

    {% for blogpost in this.blogposts %}
        {{ component('blogpost', {'id': blogpost.id}) }}
    {% endfor %}

</div>

{# blog/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Hello BlogController!{% endblock %}

{% block body %}
    {{ component('all_blogpost')}}
{% endblock %}

{# controller/blogController #}
#[Route('/search', name: 'app_search')]
    public function search(Request $request): Response
    {
        

        return $this->render('blog/search.html.twig', [
            'controller_name' => 'BlogController',
            
        ]);
    }

enter image description here it should render this but it dosent work as i type

Answer 1

for what do you need the controller? All data is handled by the component. The live#update is also not needed in 2.5 anymore. (ref: https://symfony.com/bundles/ux-live-component/current/index.html#data-binding )

You could test with adding data-model="debounce(100)|query" to the input. https://symfony.com/bundles/ux-live-component/current/index.html#debouncing

see also the following link - if you want to just update your list: https://symfony.com/bundles/ux-live-component/current/index.html#add-a-hook-on-liveprop-update

Make sure you loaded the JS with webpack. And clean your cache to be sure its the current content. e.g {{ encore_entry_script_tags('app') }} or ìmportmap if you use the newer asset_mapper.