Использование данных AlpineJS в компоненте django-cotton

Я пытаюсь использовать AlpineJS совместно с django-cotton компонентами. Я попробовал сделать следующее, но это не сработало.

<div x-data="{ message: 'I ❤️ Alpine' }">
    <c-card x-bind:title="message" x-text="message"></c-card>
</div>

с компонентом карты django-cotton, просто скопированным из django-cotton Quickstart.

<div>
    <h2>{{ title }}</h2>
    <p>{{ slot }}</p>
</div>

Есть ли способ добиться этого?

cotton/card.html

<div>
  <h2 x-text="message"></h2>
  <p>{{ slot }}</p>
</div>

<div x-data="{ message: 'I ❤️ Alpine' }">
  <c-card >content slot here</c-card>
</div>

другой метод

<div {{attrs}}>
  <h2 x-text="message"></h2>
  <p>{{ slot }}</p>
</div>

<c-card x-data="{
  message: 'I ❤️ Alpine'
}">Some content</c-card>
Вернуться на верх