Revert the use of refs for v-model to allow reactivityrevert-refs-confirmation-input-component

2 files changed, 13 insertions, 6 deletions

diff --git a/app/assets/javascripts/vue_shared/components/confirmation_input.vue b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
index 1aa03ea6317..df967d0eb3a 100644
--- a/app/assets/javascripts/vue_shared/components/confirmation_input.vue
+++ b/app/assets/javascripts/vue_shared/components/confirmation_input.vue
@@ -22,6 +22,11 @@
         default: true,
       },
     },
+    data() {
+      return {
+        enteredValue: '',
+      };
+    },
     computed: {
       inputLabel() {
         let value = this.confirmationValue;
@@ -38,7 +43,7 @@
     },
     methods: {
       hasCorrectValue() {
-        return this.$refs.enteredValue.value === this.confirmationValue;
+        return this.enteredValue === this.confirmationValue;
       },
     },
   };
@@ -55,7 +60,7 @@
       :id="inputId"
       :name="confirmationKey"
       type="text"
-      ref="enteredValue"
+      v-model="enteredValue"
       class="form-control"
     />
   </div>
diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
index a6a12614e77..d1576bcfc32 100644
--- a/spec/javascripts/vue_shared/components/confirmation_input_spec.js
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -21,11 +21,13 @@ describe('Confirmation input component', () => {
     });
 
     it('sets id of the input field to inputId', () => {
-      expect(vm.$refs.enteredValue.id).toBe(props.inputId);
+      const inputField = vm.$el.querySelector('input');
+      expect(inputField.id).toBe(props.inputId);
     });
 
     it('sets name of the input field to confirmationKey', () => {
-      expect(vm.$refs.enteredValue.name).toBe(props.confirmationKey);
+      const inputField = vm.$el.querySelector('input');
+      expect(inputField.name).toBe(props.confirmationKey);
     });
   });
 
@@ -50,12 +52,12 @@ describe('Confirmation input component', () => {
       });
 
       it('returns false if entered value is incorrect', () => {
-        vm.$refs.enteredValue.value = 'incorrect';
+        vm.enteredValue = 'incorrect';
         expect(vm.hasCorrectValue()).toBe(false);
       });
 
       it('returns true if entered value is correct', () => {
-        vm.$refs.enteredValue.value = props.confirmationValue;
+        vm.enteredValue = props.confirmationValue;
         expect(vm.hasCorrectValue()).toBe(true);
       });
     });