Symfony UX LiveComponent的LiveProp值无法更新问题求助

问题概述 #

实现文章搜索LiveComponent时，$search属性值始终无法通过前端输入框更新，导致搜索功能失效，使用symfony local:server:start启动服务，怀疑此启动方式可能引发问题。

相关代码 #

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>

app.js & bootstrap.js #

// app.js
import './bootstrap.js';
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);

解决方案 #

1. 确保LiveComponent Stimulus控制器已注册 #

Symfony UX LiveComponent依赖Stimulus控制器，需手动注册或确认自动注册生效：

// bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bundle';
import LiveController from '@symfony/ux-live-component/live_controller';

const app = startStimulusApp();
app.register('live', LiveController);

执行命令重新编译资源：

php bin/console asset-map:compile

2. 验证组件渲染正确性 #

渲染组件时必须使用{{ component('ArticleSearch') }}，检查浏览器开发者工具中组件根元素是否包含data-controller="live"属性，若缺失则说明组件未正确初始化。

3. 清除缓存并验证LiveProp配置 #

执行缓存清除命令：

php bin/console cache:clear

确认#[LiveProp(writable: true)]注解无误，$search属性为public类型（用户代码已符合要求）。

4. 排查前端错误与请求 #

• 打开浏览器控制台，检查是否存在Stimulus控制器未找到等JavaScript错误；
• 输入内容时，查看Network面板是否有POST请求发送到/_live_component端点，若无请求则说明前端绑定失效，需检查data-model属性拼写及组件的data-controller是否存在。

5. 修正搜索查询逻辑（可选） #

当前findBy(['title' => $this->search])为精确匹配，若需模糊搜索，在ArticleRepository中添加自定义方法：

// ArticleRepository.php
public function findByTitleLike(string $search): array
{
    return $this->createQueryBuilder('a')
        ->where('a.title LIKE :search')
        ->setParameter('search', '%'.$search.'%')
        ->getQuery()
        ->getResult();
}

修改组件中的getArticles方法调用：

public function getArticles(): array
{
    return $this->articleRepository->findByTitleLike($this->search);
}

关于服务器启动方式 #

symfony local:server:start本身不会导致此问题，确保运行环境为dev环境，资源已正确编译即可。

内容的提问来源于stack exchange，提问作者Lunyx