为什么，当您在 v-select 外部单击时，v-model 会重置为 null？验证

Question

此错误出现在 IE11 与 Vuetify 1.5.14 和 Vue 2.x。我使用 v-select 组件如下：

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}
       ]
     }
   }
}

并在 IE11 中进行测试，当您更改 v-select 的值并在组件外部单击或按 Tab 键时，v-model 的值将重置为 null。我还有其他行为相同的 v-selects。

在我的 main.js 文件中，我有如下 polyfill：

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

在 IE11 中使用 v-select 组件是否有解决此问题的方法？

Answer 1

即使使用此 "fix" - 您可能会在使用 Vuetify 和 IE11 时遇到更多麻烦。 Vuetify 已知不适用于 IE11..

注意：我还必须将 babel-polyfill 与此 "fix"..

一起使用

话虽如此，我有 tested/verified 这个 "fix":

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

具体来说，这一行：

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

Credit

Answer 2

我接受了 Matt 的回答并创建了一个 mixin，只要输入有值，它就会清除占位符。这需要您修改 html 以与 placeholderValue 绑定，这很麻烦，除非您有自定义控件可以将其绑定到那里。

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;
    })
  }
}

Answer 3

我的设计是单行的，所以我用"label"代替"placeholder"。它解决了问题并显示了我预期的正确行为。

为什么，当您在 v-select 外部单击时，v-model 会重置为 null？验证

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

internet-explorer-11

vuejs2

vuetify.js

v-model

v-select