You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- After init, data will be logged to the console -->
63
+
</div>
64
+
```
65
+
66
+
**Optionally pass in an options**
67
+
68
+
By default, `$fetch` will return the JSON data object. However, because we are using Axios behind the scenes, you may pass in an object to customize the request [See all options](https://github.com/axios/axios).
x-init="$fetch({ url: url, method: 'post' }).then({ data } => console.log(data))">
75
+
</div>
76
+
```
77
+
> Note that this will return the entire response object, whereas by default `$fetch` will only return the data
78
+
79
+
---
80
+
81
+
### `$interval`
82
+
**Example:**
83
+
```html
84
+
<div
85
+
x-data="{
86
+
timer: 500,
87
+
funtionToRun: function() {
88
+
console.log('Hello console')
89
+
}
90
+
}"
91
+
x-init="$interval(funtionToRun, timer)">
92
+
</div>
93
+
```
94
+
95
+
**Optionally pass in options**
96
+
97
+
By default, `$interval ` will run your function every `nth` millisecond when browser provides an animation frame (via `requestAnimationFrame`). This means that the function will not run if the browser tab is not visible. Optionally, you may pass in the following options as the second parameter:
98
+
| Property | Description |
99
+
| --- | --- |
100
+
|`timer`| Timer in milliseconds. |
101
+
|`delay`| Delay the first run. N.B. The first run is also relayed by the timer time. |
102
+
|`forceInterval`| Ignore the browser animation request mechinism. Default is false |
103
+
104
+
> ⚠️ We also add a hidden property `autoIntervalTest` that will play/pause the timer depending on it's "truthyness"
105
+
106
+
**Example:**
107
+
108
+
```html
109
+
<div
110
+
x-data="{
111
+
timer: 500,
112
+
autoIntervalTest: true, // optional to start/stop the timer
x-data="{ characters: 50, string: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
129
+
x-text="$truncate(string, characters)"
130
+
@click="characters = undefined">
131
+
<!-- Text will show 'Lorem ipsum dolor sit amet, consectetur adipiscing' and will reveal all when clicked-->
132
+
</div>
133
+
```
134
+
135
+
**Optionally pass in options**
136
+
137
+
By default, `$truncate` will return take characters as a parameter. Instead you can pass in an object and trim by words.
138
+
139
+
**Example:**
140
+
141
+
```html
142
+
<div
143
+
x-data="{ count: 5, string: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
144
+
x-text="$truncate(string, {words: count})"
145
+
@click="count = 10">
146
+
<!-- Will start with 5 words, then increase to 10 when clicked -->
147
+
</div>
148
+
```
149
+
> Behind the scenes, for words, this uses `sentence.split(" ").splice(0, words).join(" ")` which does not define a word in all languages.
0 commit comments