Skip to content

Instantly share code, notes, and snippets.

@tanopwan

tanopwan/example.html

Created August 3, 2020 05:33
Show Gist options
  • Save tanopwan/75b676a7592ab728e1cfbf6cf7ed0e2b to your computer and use it in GitHub Desktop.
Save tanopwan/75b676a7592ab728e1cfbf6cf7ed0e2b to your computer and use it in GitHub Desktop.
Download ZIP
Alpine.js with bulma with event with event params and fetch :D
Raw
example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
</head>
<button class="button" x-data="{}" @click="$dispatch('show-modal', { id: 1 })">Show</button>
<div class="modal" x-data="{ 'show': false, name: '', isLoading: false, refresh: function(id) {
this.isLoading = true;
fetch('http://dummy.restapiexample.com/api/v1/employee/' + id)
.then(response => response.json())
.then((body) => {
this.name = body.data.employee_name
})
.finally(() => this.isLoading = false)
}}" :class="{ 'is-active': show }"
x-on:show-modal.window="show = !show; refresh($event.detail.id)">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<div class="title has-text-centered">หน้าต่าง Modal</div>
<div class="subtitle">
<span x-text="name"></span>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link" @click="refresh(2)" :class="{ 'is-loading': isLoading }">Get ID 2</button>
</div>
<div class="control">
<button class="button is-link is-light" @click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @click="show = false"></button>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment