Skip to content

Commit

Permalink
type button docs
Browse files Browse the repository at this point in the history
  • Loading branch information
0wain committed Nov 22, 2023
1 parent 693a17f commit badaf25
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# 🌲 Alpine.js Requests ✉️
# 🌲✉️ Alpine.js Requests

✉️ Inline HTTP requests made simple for 🌲 Alpine.js

Expand Down Expand Up @@ -46,12 +46,13 @@ Alpine.start()

In it's simplest form, you can pass a string that will be used as the URL to send the POST request to.
```
<button x-post="/api/videos/4/like">Like</button>
<button type="button" x-post="/api/videos/4/like">Like</button>
```

If required, additional data can be passed through the `x-post` diective.
```
<button
type="button"
x-post="{route: 'index.html', body: {stars: 3}, headers: {}}"
>Like</button>
```
Expand All @@ -61,6 +62,7 @@ This event is called once the request has resolved. You can access the response
You can also access a "state" variable with `$event.detail.state`. This will be true/false depending on the success of the request.
```
<button
type="button"
x-post="{route: 'index.html', body: {stars: 3}}"
@post="liked = true;"
x-text="liked ? 'Liked' : 'Like'"
Expand All @@ -71,6 +73,7 @@ A magic method of `$post` is also provided. This is useful for making quick requ
```
<div x-init="$request('/api/videos/4/view');"></div>
<button
type="button"
@click="$request({route: '/api/videos/4/like', body: {stars: 3}})"
>Like</button>
```

0 comments on commit badaf25

Please sign in to comment.