3F Design v1.25.0

Data

Component name: <v-data>

Reactive state management

Examples

Basic

Hello world 
<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?
Show answer 
<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 {}

← Fetch →