Laravel Blade输出标签变量显示原始JSON数组问题解决

两个核心问题导致异常：

• 标签查询逻辑错误：join条件写反，且未过滤当前编辑条目的关联标签，会查询出全量关联数据；
• 模板输出逻辑错误：直接将Eloquent集合对象输出到input的value属性中，Blade渲染时会自动将集合转为JSON字符串，最终输入框填充了原始JSON内容。

1. 修正控制器标签查询逻辑 #

原有join条件不符合多对多中间表关联规则，且缺少当前listing id的过滤条件，修正后代码如下：

public function edit($id,Listing $listing)
{
    $listing = Listing::findOrFail($id);
    
    if (Auth::check() && Auth::user()->id == $listing->user_id) {
        // 修正多对多关联查询，仅查询当前listing关联的标签，直接提取标签名字段
        $tags = Tag::join('listing_tag', 'tags.id', '=', 'listing_tag.tag_id')
                ->where('listing_tag.listing_id', $id)
                ->pluck('name');

        return view('listings.edit', compact('listing','tags'));
    }
    return redirect('/dashboard');
}

如果你的Listing模型已经定义了tags()多对多关联，查询可以简化为$tags = $listing->tags->pluck('name');，无需手写join逻辑，能避免关联条件写错的问题。另外原有代码中重复查询了一次$listing，属于冗余逻辑可以直接删除。

2. 修正Blade模板输出逻辑 #

拿到标签名集合后，调用implode方法将集合拼接为逗号分隔的字符串，再赋值给input的value属性即可：

<div class="mx-2 mb-4">
    <x-label for="tags" value="Tags (separate by comma)" />
    <x-input
        id="tags"
        class="block w-full mt-1"
        type="text"
        value="{{ $tags->implode(', ') }}"
        name="tags" 
        maxlength="30"
    />
</div>

Eloquent集合对象被直接作为字符串输出时，会自动调用toJson()方法序列化为JSON格式，这就是之前输入框内填充原始JSON的直接原因。必须先从集合中提取需要的标签名称字段，拼接为符合输入框要求的逗号分隔格式后再输出。

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