Skip to content

Commit d96b635

Browse files
machine-user-gettymachine-user-getty
committed
working form need to apply actual questions
1 parent b20363f commit d96b635

File tree

4 files changed

+191
-61
lines changed

4 files changed

+191
-61
lines changed

‎src/assets/data/questions.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,11 @@
5858
"question": "esse non excepteur ut magna ut consectetur Lorem id cillum exercitation nostrud mollit reprehenderit consectetur aliquip pariatur irure dolore in",
5959
"yes": 2,
6060
"no": 7
61+
},
62+
{
63+
"id": 10,
64+
"question": "esse non excepteur ut magna ut consectetur Lorem id cillum exercitation nostrud mollit reprehenderit consectetur aliquip pariatur irure dolore in",
65+
"yes": 2,
66+
"no": 7
6167
}
6268
]

‎src/components/Button.vue‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<main id="main" role="main">
3+
<header class="container"></header>
4+
<article class="container">
5+
<section>
6+
<form>
7+
<fieldset>
8+
<div>
9+
<h2>{{question}}</h2>
10+
<button v-on:click="check" data="yes">Yes</button>
11+
<button v-on:click="check" data="no">No</button>
12+
{{picked}}
13+
</div>
14+
</fieldset>
15+
</form>
16+
</section>
17+
</article>
18+
</main>
19+
</template>
20+
21+
<script>
22+
/* import axios from 'axios' */
23+
import questions from '../assets/data/questions.json'
24+
25+
export default {
26+
name: 'Button',
27+
data () {
28+
return {
29+
arr: questions,
30+
picked: null,
31+
question: questions[0].question
32+
}
33+
},
34+
computed: {
35+
getQuestion () {
36+
return this.href === this.$root.currentRoute
37+
}
38+
},
39+
methods: {
40+
check (event) {
41+
if (event) event.preventDefault()
42+
console.log(this)
43+
/*
44+
for (var i = questions.length - 1; i >= 0; i--) {
45+
if (this.picked === 'yes') {
46+
console.log(questions[i].yes)
47+
}
48+
if (this.picked === 'no') {
49+
console.log(questions[i].no)
50+
}
51+
}
52+
*/
53+
},
54+
getQ () {}
55+
/*
56+
get (params) {
57+
console.log(this.$route)
58+
const uri = this.$route.params.id
59+
return axios.get(`https://nhm.org/nature/map/map/searchobservations?params[project_id]=` + uri)
60+
.then((res) => {
61+
this.arr = res.data
62+
})
63+
}
64+
*/
65+
},
66+
created () {
67+
this.check()
68+
}
69+
}
70+
</script>
71+
72+
<style lang="scss" scoped>
73+
@import "../assets/scss/main";
74+
75+
$article: (
76+
columns: 12,
77+
gutter: 2rem
78+
);
79+
80+
$article-phone: (
81+
columns: 12,
82+
gutter: 2rem,
83+
media: "(max-width: 768px)",
84+
);
85+
86+
#main {
87+
88+
header {
89+
padding-left:2rem;
90+
}
91+
92+
article {
93+
@include grid-container;
94+
}
95+
96+
section {
97+
98+
@include grid-column(8, $article);
99+
100+
@include grid-media($article-phone) {
101+
@include grid-column(12, $article);
102+
}
103+
104+
form {
105+
fieldset {
106+
border: 0;
107+
outline: none;
108+
margin: 0 auto;
109+
padding: 0;
110+
111+
p {
112+
113+
}
114+
115+
input[type="radio"] {
116+
display: none;
117+
}
118+
119+
label {
120+
padding: 10px 40px;
121+
background-color: #fff;
122+
color:#000;
123+
border: thin solid #000;
124+
margin-right:10px;
125+
display: inline-block;
126+
}
127+
128+
input[type="radio"]:checked + label {
129+
background-color: #000;
130+
cursor: default;
131+
color: #fff;
132+
}
133+
}
134+
}
135+
}
136+
137+
aside {
138+
@include grid-column(4, $article);
139+
140+
@include grid-media($article-phone) {
141+
@include grid-column(12, $article);
142+
}
143+
}
144+
145+
}
146+
147+
148+
</style>
149+
150+
151+
152+
153+

‎src/components/Form.vue‎

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,16 @@
33
<header class="container"></header>
44
<article class="container">
55
<section>
6-
<form v-for="(value, key, index) in arr">
7-
<fieldset v-if="picked === 'yes' && value.yes === value.id">
8-
<h2>{{value.id}} {{value.question}}</h2>
9-
<input id="toggle-on" name="toggle" type="radio" value="yes" v-model="picked">
10-
<label for="toggle-on">Yes</label>
11-
<input id="toggle-off" name="toggle" type="radio" value="no" v-model="picked">
12-
<label for="toggle-off">No</label>
13-
{{picked}}
14-
</fieldset>
15-
<fieldset v-else-if="picked === 'no' && value.no === value.id">
16-
<h2>{{value.id}} {{value.question}}</h2>
17-
<input id="toggle-on" name="toggle" type="radio" value="yes" v-model="picked">
18-
<label for="toggle-on">Yes</label>
19-
<input id="toggle-off" name="toggle" type="radio" value="no" v-model="picked">
20-
<label for="toggle-off">No</label>
21-
{{picked}}
22-
</fieldset>
23-
<fieldset v-else-if="value.id === 0">
24-
<h2>{{value.id}} {{value.question}}</h2>
25-
<input id="toggle-on" name="toggle" type="radio" value="yes" v-model="picked">
26-
<label for="toggle-on">Yes</label>
27-
<input id="toggle-off" name="toggle" type="radio" value="no" v-model="picked">
28-
<label for="toggle-off">No</label>
29-
{{picked}}
6+
<form>
7+
<fieldset>
8+
<div>
9+
<h2>{{question}}</h2>
10+
<input id="toggle-on" name="toggle" type="radio" value="yes" v-model="picked">
11+
<label for="toggle-on">Yes</label>
12+
<input id="toggle-off" name="toggle" type="radio" value="no" v-model="picked">
13+
<label for="toggle-off">No</label>
14+
{{picked}}
15+
</div>
3016
</fieldset>
3117
</form>
3218
</section>
@@ -44,36 +30,33 @@ export default {
4430
return {
4531
arr: questions,
4632
picked: null,
47-
question: questions[0].question
33+
question: questions[0].question,
34+
yes: questions[0].yes,
35+
no: questions[0].no,
36+
answers: []
4837
}
4938
},
5039
methods: {
51-
check () {
52-
console.log(questions)
53-
for (var i = questions.length - 1; i >= 0; i--) {
54-
if (this.picked === 'yes') {
55-
console.log(questions[i].yes)
56-
}
57-
if (this.picked === 'no') {
58-
console.log(questions[i].no)
59-
}
40+
getQ (id, answer) {
41+
this.yes = questions[id].yes
42+
this.no = questions[id].no
43+
this.question = questions[id].question
44+
this.picked = null
45+
this.answers.push(answer)
46+
}
47+
},
48+
watch: {
49+
'picked': function (val) {
50+
console.log(this.answers)
51+
if (val === 'yes') {
52+
this.getQ(this.yes, 'yes')
53+
}
54+
if (val === 'no') {
55+
this.getQ(this.no, 'no')
6056
}
61-
},
62-
getQ () {}
63-
/*
64-
get (params) {
65-
console.log(this.$route)
66-
const uri = this.$route.params.id
67-
return axios.get(`https://nhm.org/nature/map/map/searchobservations?params[project_id]=` + uri)
68-
.then((res) => {
69-
this.arr = res.data
70-
})
7157
}
72-
*/
7358
},
74-
created () {
75-
this.check()
76-
}
59+
created () {}
7760
}
7861
</script>
7962

‎src/router/index.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
33
import { AsyncDataPlugin } from 'vue-async-data-2'
4-
import Index from '@/components/Index'
54
import Form from '@/components/Form'
65

76
Vue.use(AsyncDataPlugin)
@@ -14,16 +13,5 @@ export default new Router({
1413
path: '/',
1514
name: 'Form',
1615
component: Form
17-
},
18-
{
19-
path: '*',
20-
name: 'Index',
21-
component: Index
22-
},
23-
{
24-
path: '/:id',
25-
name: 'Index',
26-
component: Index
27-
}
28-
]
16+
}]
2917
})

0 commit comments

Comments
 (0)