Question

我目前在我的一个项目中使用datepicker组件。如果我在datepicker菜单的空白文本字段中单击和退出，则该组件应该引发错误消息。到目前为止，错误消息仅在我输入一个值然后再次将其删除时才有效。

已经有规则检查文本字段的日期值是否大于0位或不为空。

HTML

<div id="app">
  <v-app id="inspire">
    <v-container grid-list-md>
      <v-form v-model='validForm'>
        <v-layout row wrap>
          <v-flex xs12 lg6>
            <v-text-field
              v-model="text"
              clearable
              label="Regular Textfield"
              :rules="rulesDatefield"            
              v-on="on"
             ></v-text-field>

            <v-menu
              v-model="menu1"
              :close-on-content-click="false"
              full-width
              max-width="290"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                  v-model='date'            
                  clearable
                  label="Datefield"
                  readonly
                  :rules="rulesDatefield"            
                  v-on="on"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="date"
                @change="menu1 = false"
              ></v-date-picker>
            </v-menu>
          </v-flex>
        </v-layout>
      </v-form>  
      <v-btn :disabled="!validForm" @click='printValues()' color='primary'>Create</v-btn>
    </v-container>
  </v-app>
</div>

JS

new Vue({
  el: '#app',
  data: () => ({
    validForm: false,
    text: '',
    date: '',
    menu1: false,
    rulesDatefield: [
      v => String(v).length > 0 || 'Field is empty!',
      v => v !== null || 'Field is empty!'
    ]
  }),
  methods: {
    printValues: function() {
      window.alert('Entered Text: ' + this.text + '\nEntered Date:' + this.date)
    }
  }
})

Codepen：https://codepen.io/anon/pen/XLLNZM?&editable=true&editors=101

如果我输入和退出日期选择器而不选择日期，我希望从日期文本字段收到一条错误消息，就像上面的常规文本字段一样。

Answer 1

<v-text-field
  v-model="date"            
  clearable
  readonly
  label="Datefield"
  :rules="rulesDatefield"            
  v-on="on"
  @blur="date = date || null"
></v-text-field>

看起来很奇怪，但是按您的意图工作。

日期选择器未在输入中得到验证

1 个答案: