Allow ChoiceOptions to have a falsy value (#148)

Allow falsy values to be returned from ChoiceOption

Co-authored-by: Mike Davlantes <rocks722@hotmail.com>
Co-authored-by: EkaterinaVu <ekaterina.vujasinovic@gmail.com>

Author: 3 people

examples/questionnaire/Example.vue

@@ -282,7 +282,7 @@
         this.questions.forEach(question => {
           if (question.title) {
             let answer = question.answer
-            if (typeof answer === 'object') {
+            if (Array.isArray(answer)) {
               answer = answer.join(', ')
             }
 

src/components/Question.vue

@@ -228,7 +228,9 @@
           return false
         }
       
-        if (!q || !this.dataValue) {
+        // If there is no question referenced, or dataValue is still set to its default (null).
+        // This allows a ChoiceOption value of false, but will not allow you to use null as a value.
+        if (!q || this.dataValue === null) {
           return false
         }
 
@@ -241,7 +243,7 @@
       showInvalid() {
         const q = this.$refs.questionComponent
 
-        if (!q || !this.dataValue) {
+        if (!q || this.dataValue === null) {
           return false
         }
 

src/components/QuestionTypes/BaseType.vue

@@ -25,7 +25,7 @@
     data() {
       return {
         dirty: false,
-        dataValue: '',
+        dataValue: null,
         answer: null,
         enterPressed: false,
         allowedChars: null,

src/components/QuestionTypes/MultipleChoiceType.vue

@@ -222,6 +222,20 @@
       stopEditOther() {
         this.editingOther = false
       }
+    },
+
+    computed: {
+      hasValue() {
+        if (this.question.options.filter(o => o.selected).length) {
+          return true
+        }
+
+        if (this.question.allowOther) {
+          return this.question.other && this.question.other.trim().length > 0
+        }
+
+        return false
+      }
     }
   }
 </script>

src/models/QuestionModel.js

@@ -35,7 +35,7 @@ export const MaskPresets = Object.freeze({
 export class ChoiceOption {
   constructor(options) {
     this.label = ''
-    this.value = ''
+    this.value = null
     this.selected = false
 
     Object.assign(this, options)
@@ -46,7 +46,9 @@ export class ChoiceOption {
   }
 
   choiceValue() {
-    return this.value || this.label
+    // Returns the value if it's anything other than the default (null).
+    // Returns label if the value has not been set.
+    return this.value !== null ? this.value : this.label
   }
 
   toggle() {