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?

You can try to refer this documentation and try to add the missing polyfills for IE may help to solve the issue. Ref: https://vuetifyjs.com/en/getting-started/quick-start — Deepak-MSFT, May 20 '19 at 02:23

score 1 · Accepted Answer · answered May 17 '19 at 23:12

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

Rudy · Answer 2 · 2020-01-24T20:28:37.930

I took Matt's answer and created a mixin that clears out the placeholder whenever the input has a value. This requires that you modify your html to bind with placeholderValue which is a pain unless you have a custom control where you can bind it there.

export const formFieldMixin = {
  inheritAttrs: false,
  props: {
     placeholder: {
       type: String,
       default: ''
     },
  },
  data() {
    return {
      newPlaceholder: undefined
    }
  },
  computed: {
    placeholderValue() {
      return this.newPlaceholder;
    }
  },
  created() {
    this.newPlaceholder = this.placeholder;
    this.$on('input', function(e) {
      if(typeof(e) !== 'undefined' && e != null && e != ''){
        this.newPlaceholder = undefined;
      }
      else
        this.newPlaceholder = this.placeholder;
    })
  }
}

score 0 · Answer 3 · answered Apr 17 '20 at 02:59

0

My design is single-line, so I use "label" instead for "placeholder". It fixed the problem and show the right behavior which I expected.

answered Apr 17 '20 at 02:59

張巧倪

11

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

3 Answers3