如何将 \'id\' 传输到组件 livewire 到另一个组件 livewire？

Question

我正在尝试使用 livewire 进行增删改查，但遇到了一些麻烦。

在这里你可以看到我的主要控制器组件。

class Topics extends Component
{

    public function index()
    {
       $topics = Topic::all();

        return view('topics.index', ['topics'=>$topics]);
    }

    public function create()
    {
        return view('topics.create');

    }  /* The store function is in a single component as I say after */

    public function show(Topic $topic)
    {

        return view('topics.show', compact('topic'));
    }
    
    public function edit(Topic $topic)
    {
       return view('topics.edit', compact('topic'));
    }
  
    public function destroy(Topic $topic)
    {
        //
    }

    public function render()
    {
        return view('livewire.topics');
    }
}

一开始我会尝试将所有 CRUD 函数重新组合在一个文件 livewire 中。但是我无法使用商店功能。我需要创建一个仅用于存储的组件。 也许你也有解决方案？但这不是我的主要问题。

作为存储功能，更新功能不起作用，所以我创建了一个组件名称“edit”。

这就是问题所在。

我可以 ：

• 在我的 (topics.index) 中查看我所有的主题
• 在名为“store”的 livewire 组件中查看我的创建表单，包含在视图 (topics.create) 中并创建一个主题
• 在 (topics.show) 上显示功能只能看到一个主题
• 单击我的“编辑”按钮，然后在 (topics.edit) 中查看我的页面“编辑”，但是当我包含名为“编辑”的 livewire 组件（其中包含我的更新表单）时，我无法执行以下操作：“ $主题->标题"

我不能给这个组件我点击的主题的信息。

$topic 变量是无符号的。

在您看来，我如何才能将我要编辑的主题的信息提供给该组件？

我把其余的实际视图和控制器放在这里。

商店组件：

class Store extends Component
{
    protected $rules = [

        'title' => 'required',

        'content' => 'required',    
    ];

    public $title;
    public $content;
    public $user_id;

    public function store()
    {
        $this->user_id = auth()->user()->id;

        $this->validate();
        
       $topic = Topic::create([

            'title' => $this->title,
            'content' => $this->content,
            'user_id' => $this->user_id,

        ]);
    
       return redirect()->route('topics.show', $topic->id);
      
    }
  
    public function render()
    {
        return view('livewire.test');
    }
}

编辑控制器的组件：

class Edit extends Topics
{
    public function render()
    {
       
        return view('topics.edit');
    }
}

如您所见，我试图扩展主题控制器以传递 $topic... 但它当然不起作用。

我试过了：

<div>
 <livewire:edit :topic="$topic">
</div>

还有一些其他的东西。

感谢你们对我的帮助

Answer 1

您需要在 Livewire 中定义挂载函数：

class Store extends Component
{
    protected $rules = [ ...  ];
    
    public $topic = NULL;
    public function mount($topic) {
       $this->topic = $topic 
    }

在 Livewire 组件中，您使用 mount() 而不是像您可能习惯的类构造函数 __construct() 。注意：mount() 只会在组件首次挂载时调用，即使组件刷新或重新渲染也不会再次调用。

此外，在您的情况下，如果您像那样分离 View 模型，您不妨考虑让 Livewire 单独启动。所以在 Store 中也添加一个 $listener，然后使用 javascript 加载 Livewire ...但这是另一个问题和另一个答案。