Data String with apostrophe x-data

[RunCmd]

I have a situation where I am trying to have a string with apostrophe into the Title, which is dynamic.
How can I escape that, as it gives me error and won't load the slider.

So for example if in the title I have:
title: ' I'm Lemon ';

How can I escape this so it will work?

x-data="carouselData([
{% for block in section.blocks %}
{ id: {{ forloop.index }},
url_pc: '{{ block.settings.theme_slider_img | img_url: '1500x' }}',
title: '{{ block.settings.theme_slider_title | escape }}',
desc: '{{ block.settings.theme_slider_desc | escape }}',
button_style: {% if block.settings.theme_button_slide %} 'button--secondary' {% else %} 'button--primary' {% endif %},
button_link: '{{ block.settings.theme_slide_btn_link }}'},
{% endfor %} ])" x-init="initHandleSwipe()">

Thanks in advance.

[SimoTod]

Are you using twig? Try escape('html_attr')
https://twig.symfony.com/doc/3.x/filters/escape.html

[ekwoka]

Looks like Shopify

[andreasmatuszewski]

The directive @js() gives the solution to escaping single and double quotes. You need to have Livewire installed.

Example

PHP

$input_value = "this is a string with one single quote: ' "

Html

<div x-data='value: @js($input_value)'>
...
</div>

[ekwoka]

definitely Shopify, not laravel

[andreasmatuszewski]

definitely Shopify, not laravel

It is in fact Laravel with Livewire (https://laravel-livewire.com/docs/2.x/inline-scripts#using-js-directive).

[ekwoka]

No, I mean, what the OP is asking about.

[ekwoka]

just use the backtick to define the string instead.

`

that one, then ' won't escape the string

title: `{{ block.settings.theme_slider_title | escape }}`,

[motherthestate]

wont backticks escape the string then? 😅

[ekwoka]

Break out of the string?

Technically, but it's not used for anything except code...