WIP update remaining characters to use computed properties.

src/digital-components/textarea-question/textarea-question.vue

@@ -1,20 +1,24 @@
 <template>
     <div class="textarea-question">
-        <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget"><!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
-            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label> <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
+        <div class="label-wrapper mb-1" :aria-label="TextAreaContentWidget">
+            <!-- Wrap label and span because v-html prevents v-if from displaying if v-if <span> is inside <label>-->
+            <label for="textarea-comments" class="fw-bold" v-html="TextAreaContentWidget"></label>
+            <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
         </div>
         <textarea
-            id="textarea-comments"
-            class="p-4"
-            :maxlength=maxLength
-            role="textbox"
-            aria-multiline="true"
-            :aria-required=isRequired>
-        </textarea>
-        <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining">
-            {{maxLength}}/{{maxLength}} characters remaining
-        </p>
-    </div>
+        v-model="text"
+        @keyup="updateCount"
+        id="textarea-comments"
+        class="p-4"
+        :maxlength="maxLength"
+        role="textbox"
+        aria-multiline="true"
+        :aria-required="isRequired">
+    </textarea>
+    <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining" :style="{ color: countdownColor }">
+        {{ remainingCount }}/{{ maxLength }} characters remaining
+    </p>
+</div>
 </template>
 
 <script>
@@ -23,9 +27,17 @@ export default {
     props: {
         cmsWidgetName: String,
         isRequired: Boolean,
-        maxLength: Number,
+        maxLength: {
+            type: Number,
+            default: 250
+        },
         modelValue: String,
     },
+    data() {
+        return {
+            text: ''
+        };
+    },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
 
@@ -35,11 +47,11 @@ export default {
 
         switch (typeof modelValue) {
             case "number":
-                initialValue = modelValue;
-                break;
+            initialValue = modelValue;
+            break;
             default:
-                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-                break;
+            initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+            break;
         }
 
         const fieldOptions = {
@@ -60,18 +72,19 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        remainingCount() {
+            return this.maxLength - this.text.length;
+        },
+        countdownColor() {
+            return this.remainingCount <= (this.maxLength * 0.1) ? 'red' : '';
+        }
     },
-    mounted: function () { //Remaining characters countdown
-        const my_textarea = document.getElementById("textarea-comments");
-        const remaining = document.getElementById("charactersremaining");
-        const remain = this.maxLength;
-
-        my_textarea.addEventListener("input", () => {
-            const total = remain - my_textarea.value.length;
-            const color = total < remain * 0.1 ? "red" : null; //Change text to red when the total remaining goes below 10%;
-            remaining.innerHTML = `${total}/${this.maxLength} characters remaining`;
-            remaining.style.color = color;
-        });
+    methods: {
+        updateCount() {
+            if (this.text.length > this.maxLength) {
+                this.text = this.text.slice(0, this.maxLength);
+            }
+        }
     },
 };
 </script>

src/layouts/customer-details/customer-details.vue

@@ -1,8 +1,5 @@
 <template>
-    <textareaquestion
-        cmsWidgetName="TextAreaContentWidget"
-        maxLength=250
-     />
+    <textareaquestion cmsWidgetName="TextAreaContentWidget" maxLength="250" />
 </template>
 
 <script>
@@ -15,7 +12,7 @@ import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-help
 export default {
     name: "customer-details",
     components: {
-        textareaquestion
+        textareaquestion,
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -40,6 +37,6 @@ export default {
         textAreaLabelCopy() {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
-    }
+    },
 };
 </script>