questions.vue
3.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<v-flex>
<app-toolbar class="app--toolbar"></app-toolbar>
<v-card>
<v-toolbar flat color="white">
<v-card-title>
<h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3>
<h5 style="position:relative; left:40px; top:-15px;">Select Category</h5>
<span style="position:relative; left:-95px; top:10px;">
<v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
<v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
<v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
<v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
<v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
</span>
</v-card-title>
</v-toolbar>
<component v-bind:is="component"></component>
</v-card>
</v-flex>
</template>
<script>
import axios from 'axios';
import suggestion from '@/components/questions/suggestion.vue';
import sex from '@/components/questions/sex.vue';
import health from '@/components/questions/health.vue';
import skin from '@/components/questions/skin.vue';
import diet from '@/components/questions/diet.vue';
import AppToolbar from '@/components/AppToolbar';
export default {
components: {
'suggestion': suggestion,
'sex': sex,
'health': health,
'skin': skin,
'diet': diet,
AppToolbar,
},
data: () => ({
component: 'suggestion',
isActivebtn: true,
Activebtn1: false,
Activebtn2: false,
Activebtn3: false,
Activebtn4: false,
}),
methods: {
activebtn (type) {
switch (type) {
case 'existing':
this.Activebtn4 = false;
this.Activebtn3 = false;
this.Activebtn2 = false;
this.Activebtn1 = false;
this.isActivebtn = true;
break;
case 'new':
this.Activebtn4 = false;
this.Activebtn3 = false;
this.Activebtn2 = false;
this.Activebtn1 = true;
this.isActivebtn = false;
break;
case 'new1':
this.Activebtn4 = false;
this.Activebtn3 = false;
this.Activebtn2 = true;
this.Activebtn1 = false;
this.isActivebtn = false;
break;
case 'new2':
this.Activebtn4 = false;
this.Activebtn3 = true;
this.Activebtn2 = false;
this.Activebtn1 = false;
this.isActivebtn = false;
break;
default:
this.Activebtn4 = true;
this.Activebtn3 = false;
this.Activebtn2 = false;
this.Activebtn1 = false;
this.isActivebtn = false;
break;
}
},
}
};
</script>
<style scoped>
#td{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.activebtn {
color: black !important;
}
</style>