fix(MdField): make v-model work with vue 2.5.x

Author: marcosmoura

docs/app/pages/Components/Input/examples/Counters.vue

@@ -2,28 +2,34 @@
   <div>
     <md-field>
       <label>Regular Field</label>
-      <md-input maxlength="30"></md-input>
+      <md-input v-model="regular" maxlength="30"></md-input>
     </md-field>
 
     <md-field :md-counter="false">
       <label>Maxlength with disabled counter</label>
-      <md-input maxlength="10"></md-input>
+      <md-input v-model="disabled" maxlength="10"></md-input>
     </md-field>
 
     <md-field>
       <label>Autogrow</label>
-      <md-textarea md-autogrow maxlength="200"></md-textarea>
+      <md-textarea v-model="autogrow" md-autogrow maxlength="200"></md-textarea>
     </md-field>
 
     <md-field>
       <label>Textarea</label>
-      <md-textarea maxlength="80"></md-textarea>
+      <md-textarea v-model="textarea" maxlength="80"></md-textarea>
     </md-field>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'Counters'
-}
+  export default {
+    name: 'Counters',
+    data: () => ({
+      regular: null,
+      disabled: null,
+      autogrow: null,
+      textarea: null
+    })
+  }
 </script>

docs/app/pages/Components/Input/examples/ErrorsMessages.vue

@@ -2,18 +2,18 @@
   <div>
     <md-field>
       <label>No error</label>
-      <md-input></md-input>
+      <md-input v-model="noError"></md-input>
     </md-field>
 
     <md-field :class="messageClass">
       <label>Required Field</label>
-      <md-input required></md-input>
+      <md-input v-model="required" required></md-input>
       <span class="md-error">There is an error</span>
     </md-field>
 
     <md-field :class="messageClass">
       <label>Textarea</label>
-      <md-textarea required></md-textarea>
+      <md-textarea v-model="textarea" required></md-textarea>
       <span class="md-helper-text">Helper text</span>
       <span class="md-error">There is an error</span>
     </md-field>
@@ -23,17 +23,20 @@
 </template>
 
 <script>
-export default {
-  name: 'ErrorsMessages',
-  data: () => ({
-    hasMessages: false
-  }),
-  computed: {
-    messageClass () {
-      return {
-        'md-invalid': this.hasMessages
+  export default {
+    name: 'ErrorsMessages',
+    data: () => ({
+      noError: null,
+      required: null,
+      textarea: null,
+      hasMessages: false
+    }),
+    computed: {
+      messageClass () {
+        return {
+          'md-invalid': this.hasMessages
+        }
       }
     }
   }
-}
 </script>

docs/app/pages/Components/Input/examples/FieldIcons.vue

@@ -3,33 +3,39 @@
     <md-field>
       <md-icon>event</md-icon>
       <label>Date</label>
-      <md-input></md-input>
+      <md-input v-model="date"></md-input>
     </md-field>
 
     <md-field>
       <label>Voice</label>
-      <md-input></md-input>
+      <md-input v-model="voice"></md-input>
       <md-icon>keyboard_voice</md-icon>
     </md-field>
 
     <md-field>
       <label>Description</label>
-      <md-textarea></md-textarea>
+      <md-textarea v-model="description"></md-textarea>
       <md-icon>description</md-icon>
     </md-field>
 
     <md-field>
       <md-icon class="md-accent">warning</md-icon>
       <label>Transfer Money</label>
-      <md-input></md-input>
+      <md-input v-model="money"></md-input>
       <md-icon>attach_money</md-icon>
     </md-field>
   </div>
 </template>
 
 <script>
   export default {
-    name: 'FieldIcons'
+    name: 'FieldIcons',
+    data: () => ({
+      date: null,
+      voice: null,
+      description: null,
+      money: null
+    })
   }
 </script>
 

docs/app/pages/Components/Input/examples/InlineActions.vue

@@ -7,28 +7,28 @@
 
     <md-field>
       <label>Password toggle</label>
-      <md-input type="password" v-model="password"></md-input>
+      <md-input v-model="password" type="password"></md-input>
     </md-field>
 
     <md-field :md-toggle-password="false">
       <label>Password field without toggle</label>
-      <md-input type="password" v-model="password"></md-input>
+      <md-input v-model="password" type="password"></md-input>
     </md-field>
   </div>
 </template>
 
+<script>
+  export default {
+    name: 'Icons',
+    data: () => ({
+      initial: 'Initial Value',
+      password: 'mysecurepassword'
+    })
+  }
+</script>
+
 <style lang="scss" scoped>
   .md-field:last-child {
     margin-bottom: 40px;
   }
 </style>
-
-<script>
-export default {
-  name: 'Icons',
-  data: () => ({
-    initial: 'Initial Value',
-    password: 'mysecurepassword'
-  })
-}
-</script>

docs/app/pages/Components/Input/examples/TextFields.vue

@@ -12,47 +12,54 @@
 
     <md-field>
       <label>Type here!</label>
-      <md-input></md-input>
+      <md-input v-model="type"></md-input>
       <span class="md-helper-text">Helper text</span>
     </md-field>
 
     <md-field>
       <label>With label</label>
-      <md-input placeholder="A nice placeholder"></md-input>
+      <md-input v-model="withLabel" placeholder="A nice placeholder"></md-input>
     </md-field>
 
     <md-field md-inline>
       <label>Inline</label>
-      <md-input></md-input>
+      <md-input v-model="inline"></md-input>
     </md-field>
 
     <md-field>
       <label>Number</label>
-      <md-input type="number"></md-input>
+      <md-input v-model="number" type="number"></md-input>
     </md-field>
 
     <md-field>
       <label>Textarea</label>
-      <md-textarea></md-textarea>
+      <md-textarea v-model="textarea"></md-textarea>
     </md-field>
 
     <md-field>
       <label>Textarea with Autogrow</label>
-      <md-textarea md-autogrow></md-textarea>
+      <md-textarea v-model="autogrow" md-autogrow></md-textarea>
     </md-field>
 
     <md-field>
       <label>Disabled</label>
-      <md-input disabled></md-input>
+      <md-input v-model="disabled" disabled></md-input>
     </md-field>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'TextFields',
-  data: () => ({
-    initial: 'Initial Value'
-  })
-}
+  export default {
+    name: 'TextFields',
+    data: () => ({
+      initial: 'Initial Value',
+      type: null,
+      withLabel: null,
+      inline: null,
+      number: null,
+      textarea: null,
+      autogrow: null,
+      disabled: null
+    })
+  }
 </script>

src/components/MdField/MdFieldMixin.js

@@ -1,19 +1,28 @@
 export default {
   props: {
-    value: [String, Number, Date, Array],
+    value: {
+      required: true
+    },
     placeholder: String,
     maxlength: [String, Number],
     readonly: Boolean,
     required: Boolean,
     disabled: Boolean
   },
-  data () {
-    return {
-      textareaHeight: false,
-      content: this.value || null
-    }
-  },
+  data: () => ({
+    textareaHeight: false
+  }),
   computed: {
+    model: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$nextTick(() => {
+          this.$emit('input', val)
+        })
+      }
+    },
     clear () {
       return this.MdField.clear
     },
@@ -32,8 +41,7 @@ export default {
     }
   },
   watch: {
-    value (value) {
-      this.content = value
+    model () {
       this.setFieldValue()
     },
     clear (clear) {
@@ -57,7 +65,7 @@ export default {
   methods: {
     clearField () {
       this.$el.value = ''
-      this.content = ''
+      this.model = ''
       this.setFieldValue()
     },
     setLabelFor () {
@@ -73,9 +81,8 @@ export default {
         }
       }
     },
-    setFieldValue () {
-      this.$emit('input', this.content)
-      this.MdField.value = this.content
+    setFieldValue (value) {
+      this.MdField.value = this.model
     },
     setPlaceholder () {
       this.MdField.placeholder = Boolean(this.placeholder)
@@ -94,12 +101,6 @@ export default {
     },
     onBlur () {
       this.MdField.focused = false
-    },
-    onInput () {
-      const newValue = this.$el ? this.$el.value : this.content
-
-      this.$emit('input', newValue)
-      this.MdField.value = newValue
     }
   },
   created () {

src/components/MdField/MdFile/MdFile.vue

@@ -5,7 +5,7 @@
     <input
       class="md-input"
       readonly
-      v-model="content"
+      v-model="model"
       v-bind="{ disabled, required, placeholder }"
       @focus="openPicker"
       @blur="onBlur">
@@ -67,9 +67,8 @@
       onFileSelected ({ target, dataTransfer }) {
         const files = target.files || dataTransfer.files
 
-        this.content = this.getFileName(files, target)
+        this.model = this.getFileName(files, target)
         this.$emit('md-change', files || target.value)
-        this.$emit('input', this.content)
       }
     },
     created () {

src/components/MdField/MdInput/MdInput.vue

@@ -1,22 +1,11 @@
 <template>
   <input
     class="md-input"
-    v-model="content"
-    v-bind="attributes"
-    @focus="onFocus"
-    @blur="onBlur"
-    @input="onInput"
-    @change="onInput">
-
-  <!-- <input
-    class="md-input"
-    v-model="content"
+    v-model="model"
     v-bind="attributes"
     v-on="$listeners"
     @focus="onFocus"
-    @blur="onBlur"
-    @input="onInput"
-    @change="onInput"> -->
+    @blur="onBlur">
 </template>
 
 <script>

src/components/MdField/MdTextarea/MdTextarea.vue

@@ -2,12 +2,11 @@
   <textarea
     class="md-textarea"
     :style="textareaStyles"
-    v-model="content"
+    v-model="model"
     v-bind="attributes"
     v-on="$listeners"
     @focus="onFocus"
-    @blur="onBlur"
-    @input="onInput">
+    @blur="onBlur">
   </textarea>
 </template>