Início / coding / Perguntas / 79073776
Accepted
meez
Asked: 2024-10-10 17:48:19 +0800 CST

Passe variáveis ​​frontmatter para scripts usando data-attribute e use na classe JavaScript

  • 772

Tenho o seguinte componente Astro :

   ---
    type Props = {
      uuid: string;
    };
    
    const { uuid } = Astro.props;
    ---
    
    <div class="my-feature" data-uuid={uuid} id="my-feature"></div>
    
    <script is:inline src={import.meta.env.MY_SCRIPT}></script>
    
    <script>
      import { MyFeatureHelper } from '@/scripts/my-helper';
    
      let myFeature;
    
      const ref = document.getElementById('my-container');
    
      myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
        uuid: this?.ref.uuid,
      });
    
      myFeaturer.build();
    
    </script>

Preciso passar uuidprop para a <script>tag without define:varsconforme descrito aqui porque então meu script será tratado como is:inlinee não poderei importar a classe JavaScript MyFeatureHelper, da qual preciso.

Como posso ter acesso uuide usá-lo, por exemplo uuid: this?.ref.uuid, usando o truque do atributo de dados ?

Como faço isso funcionar?

javascript

1 respostas

  1. Best Answer

    Veja a documentação do Astro , onde há um exemplo de como fazer isso com um componente web básico.

    Alternativamente, o seguinte deve funcionar:

    ---
type Props = {
  uuid: string;
};

const { uuid } = Astro.props;
---

<div data-uuid={uuid} id="my-feature"></div>

<script>
  const uuid = document.getElementById('my-feature')?.dataset.uuid
</script>
    • 0

relate perguntas