Laravel 中的表格行变成可点击的链接

Question

我有一个关于如何使 Laravel 中的表格行成为可点击链接的问题。我想当用户在表单中输入链接并单击保存时。然后表格中的标题将变为可点击的，因此当用户单击标题时，它将引导他们进入页面。所以就像在输入表单图片中一样，我有一个名为“超链接”的字段来获取链接并将其保存在数据库中。当用户点击“保存”按钮时，帖子将显示在“帖子页面”中。我希望“帖子页面”中的“标题”列成为可点击的，因此当用户单击“平铺”（测试链接）时，它将引导他们进入他们在“输入表单”中输入的链接。

输入表格

发布页面

posts.blade.php

     <tbody>
            @foreach($posts as $post)
                @if( $post->published =='publish')
                <tr href="{{$post->hyperlink}}">
                    <td class="border px-4 py-2">{{ $post->id }}</td>
                    <td class="border px-4 py-2">{{ $post->title }}</td>
                    <td class="border px-4 py-2">{{ $post->body }}</td>
                    <td class="border px-4 py-2">{{ $post->author }}</td>
                    <td class="border px-4 py-2">{{$post->published}} </td>
                    <td class="border px-4 py-2">
                        <button wire:click="edit({{ $post->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
                        <button wire:click="delete({{ $post->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
                    </td>
                </tr>
                @endif
            @endforeach
     </tbody>

create.blade.php

<form>
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="">
                    <div class="mb-4">
                        <label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
                        <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
                        @error('title') <span class="text-red-500">{{ $message }}</span>@enderror
                    </div>
                    <div class="mb-4">
                        <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
                        <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="body" placeholder="Enter Body"></textarea>
                        @error('body') <span class="text-red-500">{{ $message }}</span>@enderror
                    </div>

                    <div class="mb-4">
                        <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Author:</label>
                        <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="author" placeholder="Enter Author"></textarea>
                        @error('author') <span class="text-red-500">{{ $message }}</span>@enderror
                    </div>

                    <div class="mb-4">
                        <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Hyperlink:</label>
                        <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="hyperlink" placeholder="Enter link here"></textarea>
                        @error('hyperlink') <span class="text-red-500">{{ $message }}</span>@enderror
                    </div>

                    <div class="mb-4">
                        <label for="check" class="form-check-label">Publish:</label>
                        <input class="form-check-input" id="publish" value="publish" type="checkbox" name="published" wire:model="published">Publish</input>
                        <input class="form-check-input" id="no-publish" value="no-publish" type="checkbox" name="published" wire:model="published">No Publish</input>
                    </div>

                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
    <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
      <button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
        Save
      </button>
    </span>
                <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">

      <button wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
        Cancel
      </button>
    </span>
        </form>

发布架构

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->string('body');
        $table->string('author');
        $table->boolean('published')->default(0);
        $table->string('hyperlink');
        //create the relationship between a task and the user that created it
        $table->integer('user_id')->unsigned()->index();
        $table->timestamps();
    });
}

app/Http/Livewire/Posts.php

use Livewire\Component;
use App\Models\Post;
use App\Models\User;

class Posts extends Component
{
    public $posts, $title, $body, $post_id, $author, $published, $hyperlink;
    public $isOpen = 0;

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function render()
{
    $user = auth()->user();

    $this->posts = $user->posts;
    return view('livewire.posts');
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function create()
{
    $this->resetInputFields();
    $this->openModal();
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function openModal()
{
    $this->isOpen = true;
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function closeModal()
{
    $this->isOpen = false;
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
private function resetInputFields(){
    $this->title = '';
    $this->body = '';
    $this->post_id = '';
    $this->author = '';
    $this->published = '';
    $this->hyperlink = '';
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function store()
{
    $this->validate([
        'title' => 'required',
        'body' => 'required',
        'author' => 'required',
        'published' => 'required',
        'hyperlink' => 'required'
    ]);

    Post::updateOrCreate(['id' => $this->post_id], [
        'title' => $this->title,
        'body' => $this->body,
        'author' => $this->author,
        'published' => $this->published,
        'hyperlink' => $this->hyperlink
    ]);

    Page::updateOrCreate(['id' => $this->post_id], [
        'title' => $this->title,
        'body' => $this->body,
        'publish' => $this->published
    ]);

    session()->flash('message',
        $this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');

    $this->closeModal();
    $this->resetInputFields();
}
/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function edit($id)
{
    $post = Post::findOrFail($id);
    $this->post_id = $id;
    $this->title = $post->title;
    $this->body = $post->body;
    $this->author = $post->author;
    $this->published = $post->published;
    $this->hyperlink = $post->hyperlink;
    $this->openModal();
}

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
public function delete($id)
{
    Post::find($id)->delete();
    session()->flash('message', 'Post Deleted Successfully.');
}
}

后模型

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Auth;
class Post extends Model
{
    use HasFactory;
    protected $fillable = [
        'title', 'body', 'author', 'published', 'hyperlink'
    ];
    public function user(): \Illuminate\Database\Eloquent\Relations\BelongsTo
    {
        return $this->belongsTo(User::class);
    }
    protected static function boot()
    {
        parent::boot();
        static::creating(function ($model) {
            $model->user_id = Auth::id();
        });
        static::updating(function ($model) {
            $model->user_id = Auth::id();
        });
    }
}

Answer 1

我解决了类似的问题，并以一种方式向您展示。

<td class="border px-4 py-2" onclick="window.location='{{ route('show.companies', ['company' => $company]) }}'" style="cursor: pointer;">{{ $post->title }}</td>

如你所见，当点击列标题时，它将恢复我在路由中实现的功能......在这种情况下，它就像一个链接到另一个具有数据绑定的组件。