v-select 외부에서 클릭하면 v-model이 null로 재설정되는 이유는 무엇입니까?Vuetify

v-select 외부에서 클릭하면 v-model이 null로 재설정되는 이유는 무엇입니까?Vuetify

이 오류는 Vuetify 1.5.14 및 Vue 2.x를 사용하는 IE11에서 나타납니다. 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 값이 null로 재설정됩니다.또한 동일한 방식으로 작동하는 다른 v-select도 있습니다.

main.js 파일에는 다음과 같은 polyfill이 있습니다.

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

v-select 구성 요소를 사용하는 IE11에서 이 문제에 대한 해결 방법이 있습니까?

하더라도 '수정'은 가 더 수 있습니다.VuetifyIE11을 사용하다 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'">

신용 거래

Matt의 답변을 받아 입력에 값이 있을 때마다 플레이스 홀더를 지우는 믹스인을 만들었습니다.이를 위해서는 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;
    })
  }
}

제 디자인은 한 줄로 되어 있기 때문에 "플레이스 홀더" 대신 "라벨"을 사용합니다.그것은 문제를 해결하고 내가 기대했던 대로 올바른 행동을 보여 주었다.

언급URL : https://stackoverflow.com/questions/56193666/why-when-you-click-outside-the-v-select-the-v-model-resets-to-null-vuetify