checklist working

frontend/src/components/form.vue

@@ -23,13 +23,18 @@
                 ) {{ response }}
             //- TODO: Checklist
             .response-wrapper(v-if='prompt.type === "checklist"')
-                .checklist(v-for='response in prompt.responses')
+                .checklist(
+                    v-for='(response, index) in prompt.responses'
+                    v-bind:key='response')
                     input(
                         type='checkbox'
                         :id='response'
+                        :value='response'
                         :name='response'
+                        :true-value='response'
+                        false-value=''
                         v-model='answers[makeKebob(prompt.question)]')
-                    label {{ response}}
+                    label(:for='response') {{ response }}
             //- TODO: Slider from -3 to 0 to +3 (increments of 1)
             .response-wrapper(v-if='prompt.type === "slider"')
                 label {{ prompt.type }}

frontend/src/services/survey.service.js

@@ -32,7 +32,7 @@ const fetchSurveyByProfileId = profileId => {
                 id: 3,
                 type: 'checklist',
                 question: 'what is your current status',
-                responses: ['employed', 'unemployed'],
+                responses: ['employed', 'unemployed', 'degenerate', 'alien'],
             },
         ],
         [
@@ -40,7 +40,7 @@ const fetchSurveyByProfileId = profileId => {
                 id: 4,
                 type: 'slider',
                 question: 'whats your favorite number',
-                responses: ['1', '2', '3'],
+                responses: null,
             },
         ],
     ]

frontend/src/views/Survey.vue

@@ -40,19 +40,21 @@ article
     header
         color: #ccc
         font-style: italic
-    > *
+    header, footer, ul
         padding: 1vh
     ul
         display: flex
-        color: blue
+        /* color: blue */
         width: 100%
         li
             flex-direction: column
             border: 0px solid yellow
             width: 100%
+            padding: 0
+            text-align: left
             label
                 margin-right: 1vh
-            > *
+            > h3
                 text-transform: capitalize
-                padding: 1vh
+                padding: 1vh 0
 </style>