Introdaction
| id | first_name | last_name | avatar | |
|---|---|---|---|---|
| 1 | george.bluth@reqres.in | George | Bluth |  |
| 2 | janet.weaver@reqres.in | Janet | Weaver |  |
| 3 | emma.wong@reqres.in | Emma | Wong |  |
| 4 | eve.holt@reqres.in | Eve | Holt |  |
| 5 | charles.morris@reqres.in | Charles | Morris |  |
| 6 | tracey.ramos@reqres.in | Tracey | Ramos |  |
vue
<template>
<ViewState
v-slot="uid"
src="query://uid"
>
<ViewState
v-if="uid.data"
v-slot="user"
:src="`reqres-sync://users/${uid.data}`"
path="data"
schema-src="app-config://usebootstrap/schemas/basic"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
:state-src="user"
state-path="email"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BInputGroup margin="b-3">
<BFormInput
type="text"
:state-src="user"
state-path="first_name"
/>
<BInputGroupText style="width:3em;">
<Spinner
v-show="user.syncStatus == 100"
spinner="grow"
sm
/>
</BInputGroupText>
</BInputGroup>
</Col>
</Row>
<JsonView
v-if="user.validationResult && !user.validationResult.valid"
:data="user.validationResult"
/>
<JsonView
v-else
:data="user.syncResult"
/>
</ViewState>
<ViewState
v-if="!uid.data"
v-slot="users"
src="reqres://users"
path="data"
>
<b-table striped>
<thead>
<tr>
<th scope="col">
id
</th>
<th scope="col">
email
</th>
<th scope="col">
first_name
</th>
<th scope="col">
last_name
</th>
<th scope="col">
avatar
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in users.data"
:key="item"
@click="uid.update(item.id);"
>
<td>{{ item.id }}</td>
<td>{{ item.email }}</td>
<td>{{ item.first_name }}</td>
<td>{{ item.last_name }}</td>
<td>
<Avatar
circle
:img-src="item.avatar"
:img-alt="item.first_name"
/>
</td>
</tr>
</tbody>
</b-table>
</ViewState>
</ViewState>
</template>
Attributes
Src
| Title | Protocol | Get | Put (Set) | Description |
|---|---|---|---|---|
| Http | {custom protocol} | Clinet / Server | ||
| Session Storage | session-storage://{name} | Clinet only | ||
| Local Storage | local-storage://{name} | Clinet only | ||
| URL Path | path://{index} | Clinet / Server | ||
| URL Hash | hash:// | Clinet / Server | ||
| URL Query | query://{name} | Clinet / Server | ||
| Route | route://{name} | Clinet / Server | ||
| Localization | localization://{name} | Clinet / Server | ||
| Nuxt app.config | app-config://{name} | Clinet / Server | ||
| Nuxt useState | state://{name} | Clinet / Server | ||
| Nuxt plugins helper | helper://{name} | Clinet / Server | ||
| Nuxt server API | api://{path} | Clinet / Server | ||
| DOM Attributes | dom-attr://{name} | Clinet |
Path
SchemaSrc
Looks good!
Please enter your email
Looks good!
Please enter your firstname
Looks good!
Please enter your firstname
vue
<template>
<ViewState
v-slot="user"
src="reqres://users/5"
path="data"
schema-src="app-config://usebootstrap/schemas/basic"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
ID
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:value="user.data.id"
readonly="plaintext"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="email"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your email
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="first_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
last_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
type="text"
validate
:state-src="user"
state-path="last_name"
/>
<BValidFeedback>
<template #valid>
Looks good!
</template>
Please enter your firstname
</BValidFeedback>
</Col>
</Row>
<ActionState src="reqres://user/5">
<template #default="{ action }">
<b-button
color="primary"
:disabled="!user.validationResult.valid"
@click="action('post', user.data)"
>
Action
</b-button>
</template>
<template #fallback>
<b-button
color="primary"
disabled
>
<Spinner
spinner="grow"
sm
aria-hidden="true"
/>
Loading...
</b-button>
</template>
<template #complete="{ data, status }">
<b-button
color="success-subtle"
color-generate
@click="status.value = 0"
>
Retry
</b-button>
<div v-if="status.value == 201">
Response: {{ data }}
</div>
<div v-else>
ErrorMessages: {{ data }}
</div>
</template>
</ActionState>
</ViewState>
</template>