Data
Component name: <v-data>
Reactive state management
Examples
Basic
<div class="app">
<v-data v-slot="state" :data="{ name: 'world' }">
Hello {{state.name}}
</v-data>
</div>
1
2
3
4
5
Reactive
What goes up when the rain comes down?
<div class="app">
<v-data v-slot="state" :data="{ show: false }">
<div class="text-center">
<v-text font-size="7" bold>
What goes up when the rain comes down?
</v-text>
<v-text v-if="state.show" class="mt-3" font-size="7">
"An umbrella ☔️"
</v-text>
<v-text class="mt-3">
<a href="javascript:;" v-on:click="state.show = !state.show" class="text-primary">
{{ !state.show ? 'Show' : 'Hide' }} answer
</a>
</v-text>
</div>
</v-data>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
API
Name | Type | Description | Default |
v-slot | Scoped Slot | Bind data to the specified Scoped Slot | - |
data | Object | Set data | {} |