F
Filament•11mo ago
binaryfire

Clean way to avoid escaping of quotes in JS in extraAttributes

Hi all I'm using HtmlString when using JS in extraAttributes() but it's adding slashes before all single and double quotes. The only way I've been able to avoid that is by using Illuminate\Support\Js: 
->extraAttributes([
   'x-on:click' => new HtmlString('$el.classList.add(' . Js::from('pointer-events-none') . ',' . Js::from('opacity-70') . ')'),
]);
->extraAttributes([
   'x-on:click' => new HtmlString('$el.classList.add(' . Js::from('pointer-events-none') . ',' . Js::from('opacity-70') . ')'),
]);
Which isn't very readable... Is there a cleaner of doing this?
Solution:
->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])
->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])
?...
Jump to solution
3 Replies
binaryfire
binaryfireOP•11mo ago
If I use HtmlString without the Js helper like: 
'x-on:click' => new HtmlString('$el.classList.add("pointer-events-none", "opacity-70")')
'x-on:click' => new HtmlString('$el.classList.add("pointer-events-none", "opacity-70")')
I end up with: 
x-on:click="$el.classList.add(\" pointer-events-none\",="" \"opacity-70\")"="
x-on:click="$el.classList.add(\" pointer-events-none\",="" \"opacity-70\")"="
bump
Solution
LeandroFerreira
LeandroFerreira•11mo ago
->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])
->extraAttributes(['x-on:click' => new HtmlString('$el.classList.add(\'pointer-events-none\', \'opacity-70\')')])
?
binaryfire
binaryfireOP•11mo ago
Works, thank you! I could have sworn I tried that lol

Did you find this page helpful?