Why, when you click outside the v-select, the v-model resets to null? Vuetify

Question

This error appears in IE11 with Vuetify 1.5.14 and Vue 2.x. I am using the v-select component as follows:

form#login-form
  v-select#inputTypeDocument(:items = 'type_documents' required v-model='form.typeDocument' placeholder='Type of document')

export default {
   data () {
     return {
       form: {
         typeDocument: 2,
         numberDocument: '',
         password: ''
       },
       type_documents: [
         {text: 'Type 1', value: 1},
         {text: 'Type 2', value: 2}
       ]
     }
   }
}

And testing in IE11, when you change the value of the v-select and click outside the component or press tab, the value of the v-model is reset to null. And I have other v-selects that behave in the same way.

In my main.js file I have polyfill as follows:

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import axios from 'axio
[..]

Is there any solution for this issue in IE11 with the v-select component?

Answer 1

Even using this "fix" - you may have more trouble with Vuetify and IE11 down the line. Vuetify is known to not work with IE11..

Note: I also had to use the babel-polyfill along with this "fix"..

With that being said, I have tested/verified this "fix":

    <v-select id="input" 
        :items="type_documents" 
        required 
        v-model="form.typeDocument" 
        :placeholder="form.typeDocument ? undefined : 'Type of document'">
    </v-select>

Specifically, this line:

:placeholder="form.typeDocument ? undefined : 'Type of document'">

Credit