Почему, когда вы щелкаете за пределами v-select, v-модель сбрасывается до нуля? Vuetify

Эта ошибка появляется в 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 и щелкаете за пределами компонента или нажимаете вкладку, значение v-model сбрасывается до нуля. И у меня есть другие v-selects, которые ведут себя так же.

В моем файле main.js у меня есть полифилл следующим образом:

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

Есть ли решение этой проблемы в IE11 с компонентом v-select?


vuetify.js vuejs2 v-model internet-explorer-11 v-select
person Dvex    schedule 17.05.2019    source источник
comment
Вы можете попробовать обратиться к этой документации и попытаться добавить отсутствующие полифиллы для IE, это может помочь решить проблему. Ссылка: vuetifyjs.com/en/getting-started/quick-start   -  person Deepak-MSFT    schedule 20.05.2019

Ответы (3)


arrow_upward
1
arrow_downward

Даже при использовании этого «исправления» у вас могут возникнуть проблемы с Vuetify и IE11 в будущем. Известно, что Vuetify не работает с IE11..

Примечание. Мне также пришлось использовать babel-polyfill вместе с этим «исправлением»..

С учетом сказанного, я протестировал/проверил это «исправление»:

    <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'">

Кредит

person Matt Oestreich    schedule 17.05.2019

arrow_upward
0
arrow_downward

Я взял ответ Мэтта и создал миксин, который очищает заполнитель всякий раз, когда ввод имеет значение. Это требует, чтобы вы изменили свой 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;
    })
  }
}
person Rudy    schedule 24.01.2020

arrow_upward
0
arrow_downward

Мой дизайн однострочный, поэтому я использую «метку» вместо «заполнителя». Это устранило проблему и показало правильное поведение, которое я ожидал.

person 張巧倪    schedule 17.04.2020