xxxxxxxxxx
1
<template>
2
<MDBCard class="mx-2 px-2 mb-8">
3
<MDBCardTitle class="mt-4 mx-4">
4
<h1>Aktivitäten und Einschränkungen</h1>
5
</MDBCardTitle>
6
<MDBCardBody>
7
<MDBStepper vertical ref="stepperRef">
8
<MDBStepperStep v-for="(v,k) in whodas">
9
<MDBStepperHead :icon="k.toString()">
10
Frage {{ k }}: {{ v.s }}
11
</MDBStepperHead>
12
<MDBStepperContent>
13
<MDBCard class="mb-3">
14
<MDBCardImg :src="v.p" alt="..."/>
15
<MDBCardBody>
16
<MDBCardTitle>{{v.t}}</MDBCardTitle>
17
</MDBCardBody>
18
<MDBCardFooter>
19
<MDBRow>
20
<MDBCol class="d-flex justify-content-end">
21
<MDBBtn color="primary">Blabla</MDBBtn>
22
</MDBCol>
23
</MDBRow>
24
</MDBCardFooter>
25
</MDBCard>
26
</MDBStepperContent>
27
</MDBStepperStep>
28
</MDBStepper>
29
</MDBCardBody>
30
<MDBCardFooter>
31
<MDBRow>
32
<MDBCol class="d-flex justify-content-end">
33
<MDBBtn color="primary">Weiter</MDBBtn>
34
</MDBCol>
35
</MDBRow>
36
</MDBCardFooter>
37
</MDBCard>
38
</template>
xxxxxxxxxx
1
<style>
2
#app {
3
font-family: Roboto, Helvetica, Arial, sans-serif;
4
}
5
</style>
xxxxxxxxxx
1
<script>
2
import {
3
MDBStepper,
4
MDBStepperStep,
5
MDBStepperHead,
6
MDBStepperContent,
7
MDBCard, MDBCardBody,MDBCardTitle, MDBCardImg, MDBCardFooter,MDBBtn
8
} from "mdb-vue-ui-kit";
9
import {
10
ref
11
} from "vue"
12
export default {
13
components: {
14
MDBStepper,
15
MDBStepperStep,
16
MDBStepperHead,
17
MDBStepperContent,
18
MDBCard, MDBCardBody,MDBCardTitle, MDBCardImg, MDBCardFooter,MDBBtn
19
},
20
21
setup() {
22
const stepperRef = ref(null)
23
const whodas = ref({
24
"1": {
25
"s": "Item 1",
26
"t": "Some random Text ...........................",
27
"p": "https://picsum.photos/200/200"
28
},
29
"2": {
30
"s": "Item 1",
31
"t": "Some random Text ...........................",
32
"p": "https://picsum.photos/200/500"
33
},
34
"3": {
35
"s": "Item 1",
36
"t": "Some random Text ...........................",
37
"p": "https://picsum.photos/200/400"
38
},
39
"4": {
40
"s": "Item 1",
41
"t": "Some random Text ...........................",
42
"p": "https://picsum.photos/200/500"
43
},
44
"5": {
45
"s": "Item 1",
46
"t": "Some random Text ...........................",
47
"p": "https://picsum.photos/200/600"
48
},
49
"6": {
50
"s": "Item 1",
51
"t": "Some random Text ...........................",
52
"p": "https://picsum.photos/200/200"
53
},
54
"7": {
55
"s": "Item 1",
56
"t": "Some random Text ...........................",
57
"p": "https://picsum.photos/200/100"
58
},
59
"8": {
60
"s": "Item 1",
61
"t": "Some random Text ...........................",
62
"p": "https://picsum.photos/200/500"
63
},
64
"9": {
65
"s": "Item 1",
66
"t": "Some random Text ...........................",
67
"p": "https://picsum.photos/300/600"
68
},
69
"10": {
70
"s": "Item 1",
71
"t": "Some random Text ...........................",
72
"p": "https://picsum.photos/300/500"
73
},
74
"11": {
75
"s": "Item 1",
76
"t": "Some random Text ...........................",
77
"p": "https://picsum.photos/100/500"
78
}
79
})
80
return {stepperRef, whodas}
81
},
82
83
props: {
84
msg: String,
85
86
}
87
};
88
</script>
Console errors: 0