Any way to use special characters inside components?

[didiraja]

Components docs, says props objects should be encoded.

I have a dynamic object that could have special characters in some keys. How is the best way to send this values as props on a component, without needing to remove the characters?

Example:

• data

[{
  "product": "Lorem TV 15'' LED",
  "link": "http://link.to/product",
},
{
  "product": "Ipsum Airfryer",
  "link": "http://link.to/product-2",
}]

• template

<each loop="item in {{page.data}}">
  <x-link data={{item}} />
</each>

• x-link component

<script props>
  module.exports = {
    data: props.data
  }
</script>

<a href={{data.link}}>{{data.product}}</a>

Airfryer renders normally, but TV don't, it breaks after apostrophe. Tried using html entities but it just don't render and unicode \u0027 also breaks on render, although other unicodes works as \u00a0 and \u00e2.

[cossssmin]

Only way is like in the docs, i.e. make sure the quotes are escaped like "Lorem TV 15'' LED" and then use {{{ }}} to output the unescaped value:

<a href="{{data.link}}">{{{data.product}}}</a>

[didiraja]

worked flawlessly, thanks