Skip to content

Instantly share code, notes, and snippets.

Created July 21, 2022 10:58
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save marcelozarate/7630723d2adea307ecb83e24bb5312ed to your computer and use it in GitHub Desktop.
Alpine.JS first time use (consuming API)
<!DOCTYPE html>
<html lang="en" data-theme="coffee">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=""></script>
<title>Alpine First Use</title>
<script src="//" defer></script>
<div x-data="{ users: [], editingUser: 0, originalName: ''}"
.then(response => response.json())
.then(data => users = data)">
<template x-for="user in users">
<div class="p-3">
<span x-text="" class="text-lg text-primary"></span>
(<span x-text="user.username" class="p-1"></span> - <span x-text="" class="p-1"></span>)
<button x-on:click="editingUser =; originalName =" class="btn btn-sm">Edit Records</button>
<div x-show=" === editingUser">
<input type="text" x-model="" class="input input-bordered w-full max-w-xs">
<div class="btn-group m-2">
<button x-on:click="fetch('', {
method: 'PATCH',
body: JSON.stringify({
name: 'TEST',
headers: {
'Content-type': 'application/json; charset=UTF-8',
.then((response) => response.json())
.then((json) => console.log(json));" class="btn btn-success btn-sm">Save</button><button x-on:click="editingUser = null; = originalName;" class="btn btn-error btn-sm">Cancel</button>
<button x-on:click="fetch('', {
method: 'DELETE',
});" class="btn btn-error btn-sm m-2">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment