X-Splade-Defer Component
The Defer Component allows you to load data asynchronously. The component exposes a processing
, response
, and reload
property.
<x-splade-defer url="https://api.com/quote/random"> <p v-show="processing">Loading random quote...</p> <p v-if="response.data" v-text="response.data.quote" /> <button @click.prevent="reload">New quote</button></x-splade-defer>
Request body
By default, the component performs a GET
request with an application/json
accept header. You may change this with the method
and accept-header
attributes. In case you need to post data, you may use the request
attribute:
<x-splade-defer method="POST" url="/post/increase" request="{ post_id: 1 }"> ...</x-splade-defer>
Poll
You may also use this component to poll for new data. With the poll
attribute, you can specify the interval in milliseconds.
<x-splade-defer accept="text/html" url="/news/latestHeadline" poll="5000"> <p v-text="response" /></x-splade-defer>
Manual
By default, the component starts loading the data right after the browser has loaded the page. You may disable this by adding a manual
attribute.
<x-splade-defer manual url="https://api.com/quote/random"> <button @click.prevent="reload">Load quote</button></x-splade-defer>
Watch
The component can watch a passed value for changes using the watch-value
attribute. Changes to the passed value will trigger a reload of the data. An example of this is reloading the data when form input changes. You may even debounce the execution with the watch-debounce
attribute.
<x-splade-form default="{ amount: 1 }"> <x-splade-defer url="/product/reservation" method="post" request="{ product: 'book', amount: form.amount }" watch-value="form.amount" > <input v-model="form.amount" type="number" /> <p v-text="response" /> </x-splade-defer></x-splade-form>
If you want to watch all form data, you may pass form.$all
to the watch-value
attribute.
Async templates and Rehydration
If you want to load sections of your template asynchronously, check out the Lazy Loading section. There's also a Rehydrate Component to reload a section of your Blade template.