Skip to content

Instantly share code, notes, and snippets.

@oliuz
Forked from fotrino/CreateComment.php
Created November 6, 2023 18:28
Show Gist options
  • Save oliuz/95d236e48fafa424d1adc65f5a68d504 to your computer and use it in GitHub Desktop.
Save oliuz/95d236e48fafa424d1adc65f5a68d504 to your computer and use it in GitHub Desktop.
@mentions with Alpine.js, Livewire & Tributeq
<x-mention wire:model="body" :mentionables="$mentionables" />
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class CreateComment extends Component
{
public $mentionables;
public $body;
public function mount()
{
$this->mentionables = User::all()
->map(function ($user) {
return [
'key' => $user->name,
'value' => $user->username,
];
});
}
}
@props([
'mentionables' => []
])
<div
x-data
x-init='
()=> {
let tribute = new Tribute({
trigger: "@",
values: @json($mentionables)
});
tribute.attach($refs.textarea);
}
'
wire:ignore
>
<textarea x-ref="textarea" {{ $attributes->merge(['class' => 'form-control']) }}></textarea>
</div>
@once
@push('styles')
<link href="https://unpkg.com/browse/tributejs@5.1.3/dist/tribute.css" rel="stylesheet" />
@endpush
@push('scripts')
<script src="https://unpkg.com/browse/tributejs@5.1.3/dist/tribute.min.js"></script>
@endpush
@endonce
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment