Combadge Users
Reqres user API を利用したアプリケーションのサンプル。
項目
Route
| # | id | first_name | last_name | avatar | |
|---|---|---|---|---|---|
| -- 1 -- | 1 | george.bluth@reqres.in | George | Bluth |  |
| -- 2 -- | 2 | janet.weaver@reqres.in | Janet | Weaver |  |
| -- 3 -- | 3 | emma.wong@reqres.in | Emma | Wong |  |
| -- 4 -- | 4 | eve.holt@reqres.in | Eve | Holt |  |
| -- 5 -- | 5 | charles.morris@reqres.in | Charles | Morris |  |
| -- 6 -- | 6 | tracey.ramos@reqres.in | Tracey | Ramos |  |
<template>
<b-table striped>
<thead>
<tr>
<th scope="col">
#
</th>
<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>
<c-list-item
v-slot="{ item }"
tag="tr"
state-src="reqres://users"
state-path="data"
>
<th scope="row">
<c-link
state-src="query://uid"
:state-to="item.id"
>
-- {{ item.id }} --
</c-link>
</th>
<td>{{ item.id }}</td>
<td>{{ item.email }}</td>
<td>{{ item.first_name }}</td>
<td>{{ item.last_name }}</td>
<td>
<b-img
:src="item.avatar"
alt="Card image cap"
/>
</td>
</c-list-item>
</tbody>
</b-table>
</template>
<script setup>
</script>
<template>
<c-data
v-slot="uid"
state-src="query://uid"
>
<c-data
v-if="uid.data"
v-slot="{ data }"
:state-src="`reqres://users/${uid.data}`"
state-path="data"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="staticEmail"
type="text"
readonly="plaintext"
:value="`${data.email}`"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="inputPassword"
type="text"
:value="data.first_name"
/>
</Col>
</Row>
</c-data>
</c-data>
</template>
<script setup>
</script>
State
| # | id | first_name | last_name | avatar | |
|---|---|---|---|---|---|
| -- 1 -- | 1 | george.bluth@reqres.in | George | Bluth | |
| -- 2 -- | 2 | janet.weaver@reqres.in | Janet | Weaver | |
| -- 3 -- | 3 | emma.wong@reqres.in | Emma | Wong | |
| -- 4 -- | 4 | eve.holt@reqres.in | Eve | Holt | |
| -- 5 -- | 5 | charles.morris@reqres.in | Charles | Morris | |
| -- 6 -- | 6 | tracey.ramos@reqres.in | Tracey | Ramos | |
<template>
<b-table striped>
<thead>
<tr>
<th scope="col">
#
</th>
<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>
<c-list-item
v-slot="{ item }"
tag="tr"
state-src="reqres://users"
state-path="data"
>
<th scope="row">
<c-link
state-src="state://selected-user"
:state-to="item.id"
>
-- {{ item.id }} --
</c-link>
</th>
<td>{{ item.id }}</td>
<td>{{ item.email }}</td>
<td>{{ item.first_name }}</td>
<td>{{ item.last_name }}</td>
<td>
<b-img
:src="item.avatar"
alt="Card image cap"
/>
</td>
</c-list-item>
</tbody>
</b-table>
</template>
<script setup>
</script>
<template>
<c-data
v-slot="uid"
state-src="state://selected-user"
>
<c-data
v-if="uid.data"
v-slot="{ data }"
:state-src="`reqres://users/${uid.data}`"
state-path="data"
>
<Row margin="b-3">
<BColFormLabel
for="staticEmail"
class="col-sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="staticEmail"
type="text"
readonly="plaintext"
:value="`${data.email}`"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword"
class="col-sm-2"
>
first_name
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="inputPassword"
type="text"
:value="data.first_name"
/>
</Col>
</Row>
</c-data>
</c-data>
</template>