| URI | path:// |
|---|---|
| Path | If no value is set, the path is retrieved as an array. If an index number is specified, the part of the path at that position is retrieved as a string. |
| Example | path://4 |
ViewState
Retrieve URL Path
Specify path:// in the src attribute to retrieve the URL path as an array.
vue
<template>
<ViewState
v-slot="example"
src="path://"
>
<div>{{ example.data }}</div>
</ViewState>
</template>
[
"lang-en",
"integration",
"sources",
"url-path"
]
Set
Update the URL path using the set method and array index.
vue
<template>
<ViewState
v-slot="example"
src="path://"
>
<b-button
v-if="example.data[0]== 'lang-en'"
color="success"
:value="example.data"
@click="(event: any) => example.set(0, 'lang-ja')"
>
Set to [lang-ja]
</b-button>
<b-button
v-if="example.data[0]== 'lang-ja'"
color="primary"
:value="example.data"
@click="(event: any) => example.set(0, 'lang-en')"
>
Set to [lang-en]
</b-button>
</ViewState>
</template>
PathIndex
To use only a part of the URL path, include the index in the URI.
To update, use the update method.
vue
<template>
<div>
<ViewState
v-slot="example"
src="path://0"
>
<b-button
v-if="example.data == 'lang-en'"
color="success"
:value="example.data"
@click="(event: any) => example.update('lang-ja')"
>
Set to [lang-ja]
</b-button>
<b-button
v-if="example.data == 'lang-ja'"
color="primary"
:value="example.data"
@click="(event: any) => example.update('lang-en')"
>
Set to [lang-en]
</b-button>
</ViewState>
</div>
<div>
<ViewState
v-slot="example"
src="path://3"
>
<b-button
color="warning"
:value="example.data"
@click="(_event: any) => example.update('state')"
>
Set to [state]
</b-button>
</ViewState>
</div>
</template>