Alpine extract data to script tag

<div x-data="dropdown">
    <button @click="toggle">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>
 
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,
 
            toggle() {
                this.open = ! this.open
            },
        }))
    })
</script>

Source: alpinejs.dev

Similar codes

2 votes200 views2 answers
Bootstrap icons in angular
CSS Bootstrap
9 votes145 views2 answers
Css style for the first element only
CSS
0 vote153 views1 answer
Css set width of a span
CSS
0 vote152 views1 answer
Css hero image
CSS
0 vote146 views1 answer
Alternative for lodash omit in javascript
CSS
0 vote254 views1 answer
Width cross browser
CSS
-1 vote148 views1 answer
Neomorphic box
CSS
0 vote149 views1 answer
Css click through after
CSS
9 votes148 views1 answer
Make background full on every screen css
CSS
0 vote143 views4 answers
How to chose tailwindcss while creating larevel project
CSS