Use :value & @input instead of v-model syntax in Editor***.vue & InputField.vue

Author: MaySoMusician

src/components/EditorField.vue

@@ -3,11 +3,12 @@
     <span v-if="title" class="EditorField-Title">{{ title }}</span>
     <div class="EditorField-Form">
       <editor-input-field
-        v-model="modelValue"
+        :value="value"
         :label="label"
         :placeholder="placeholder"
         :transparent="transparent"
         :readonly="readonly"
+        @input="$emit('input', $event)"
       />
       <content-card-editor-button
         v-if="iconName"
@@ -24,10 +25,6 @@ import Vue from 'vue'
 import EditorInputField from '@/components/EditorInputField.vue'
 import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
 
-type DataType = {
-  modelValue: string
-}
-
 export default Vue.extend({
   components: { EditorInputField, ContentCardEditorButton },
   props: {
@@ -66,19 +63,6 @@ export default Vue.extend({
       required: false,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>

src/components/EditorInputField.vue

@@ -1,6 +1,6 @@
 <template>
   <v-text-field
-    v-model="modelValue"
+    :value="value"
     :color="transparent ? 'white' : '#424242'"
     type="text"
     :hint="hint"
@@ -11,14 +11,13 @@
     class="elevation-0"
     solo
     flat
+    @input="$emit('input', $event)"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-type DataType = {
-  modelValue: string
-}
+
 export default Vue.extend({
   name: 'InputField',
   props: {
@@ -62,19 +61,6 @@ export default Vue.extend({
       required: true,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>

src/components/EditorTextarea.vue

@@ -2,25 +2,22 @@
   <div>
     <span v-if="title" class="EditorTextarea-Title">{{ title }}</span>
     <v-textarea
-      v-model="modelValue"
+      :value="value"
       :hint="hint"
       :label="label"
       :placeholder="placeholder"
       background-color="white"
       class="elevation-0"
       solo
       flat
+      @input="$emit('input', $event)"
     />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
-type DataType = {
-  modelValue: string
-}
-
 export default Vue.extend({
   props: {
     title: {
@@ -48,19 +45,6 @@ export default Vue.extend({
       required: false,
       default: ''
     }
-  },
-  data(): DataType {
-    return {
-      modelValue: this.value
-    }
-  },
-  watch: {
-    modelValue(value) {
-      this.$emit('input', value)
-    },
-    value(value) {
-      this.modelValue = value
-    }
   }
 })
 </script>

src/components/InputField.vue

@@ -1,7 +1,7 @@
 <template>
   <v-text-field
     v-if="type === 'password'"
-    v-model="value"
+    :value="value"
     :color="textFieldColor"
     :type="show ? 'text' : 'password'"
     :hint="hint"
@@ -12,6 +12,7 @@
     solo
     flat
     outlined
+    @input="$emit('input', $event)"
   >
     <template v-slot:prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
@@ -26,7 +27,7 @@
   </v-text-field>
   <v-text-field
     v-else-if="type === 'email'"
-    v-model="value"
+    :value="value"
     :color="textFieldColor"
     type="text"
     :hint="hint"
@@ -37,14 +38,15 @@
     solo
     flat
     outlined
+    @input="$emit('input', $event)"
   >
     <template v-slot:prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
   </v-text-field>
   <v-text-field
     v-else-if="type === 'classId'"
-    v-model="value"
+    :value="value"
     :color="textFieldColor"
     type="text"
     :hint="hint"
@@ -55,14 +57,15 @@
     solo
     flat
     outlined
+    @input="$emit('input', $event)"
   >
     <template v-slot:prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
     </template>
   </v-text-field>
   <v-text-field
     v-else
-    v-model="value"
+    :value="value"
     :color="textFieldColor"
     type="text"
     :hint="hint"
@@ -73,6 +76,7 @@
     solo
     flat
     outlined
+    @input="$emit('input', $event)"
   >
     <template v-slot:prepend-inner>
       <v-icon :color="prependIconColor">{{ prependIcon }}</v-icon>
@@ -83,12 +87,15 @@
 <script lang="ts">
 import Vue from 'vue'
 type DataType = {
-  value: string
   show: boolean
 }
 export default Vue.extend({
   name: 'InputField',
   props: {
+    value: {
+      type: String,
+      default: ''
+    },
     type: {
       type: String,
       required: false,
@@ -122,8 +129,7 @@ export default Vue.extend({
   },
   data(): DataType {
     return {
-      show: false,
-      value: ''
+      show: false
     }
   },
   computed: {
@@ -182,11 +188,6 @@ export default Vue.extend({
       }
       return 'mdi-check-circle'
     }
-  },
-  watch: {
-    value(value) {
-      this.$emit('input', value)
-    }
   }
 })
 </script>