0

目前我正在从事 PWA 项目。我正在使用 ionic-vue 包。我正在使用 ion-input 以表单形式获取用户输入,但必需和大小属性不起作用。

vue组件代码:

<template>
<div>
<ion-header>
  <ion-toolbar>
    <ion-icon name="close" class="close-icon" @click.prevent="redirectTo(close)"></ion-icon>
    <ion-title>{{ title }}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="occupie-field" padding>
  {{ content }}
  <div>
    <ion-input class="modal-ion-input"
      :placeholder="rootElement.$t('number-of-person')"
      type="number" mode="ios" inputmode="decimal"
      :value="total_person"
      @input="total_person = $event.target.value"
    ></ion-input>
    <ion-input class="modal-ion-input"
      :placeholder="rootElement.$t('name')"
      :value="booking_name"
      @input="booking_name = $event.target.value"
    ></ion-input>
    <ion-input class="modal-ion-input"
      :placeholder="rootElement.$t('mobile-no')"
      type="tel" inputmode="tel"
      :value="contact_number"
      @input="contact_number = $event.target.value"
    ></ion-input>
    <ion-input class="modal-ion-input"
      :placeholder="rootElement.$t('gstin-no')"
      :value="gst_no" size="15" type="text"
      @input="gst_no = $event.target.value"
    ></ion-input>
    <!-- <tags-input
      element-id="tags"
      :existing-tags="available_table_list"
      :typeahead="true"
      :showAddedTags="true"
      typeahead-style="dropdown"
      :delete-on-backspace="false"
      :only-existing-tags="true"
      placeholder="Merge Table"
      @tag-added="onTagAdded"
      @tag-removed="onTagRemoved"
      v-model="selectedTags"
    ></tags-input> -->
    <!-- <ion-list> -->
    <ion-item class="select-tablee">
      <ion-label hidden>{{rootElement.$t('select-tables')}}</ion-label>
      <ion-select  :placeholder="rootElement.$t('merge-table')" multiple="true" value="merge_tables" @ionChange="selectChange($event)" :disabled="Object.keys(available_table_list).length === 0">
        <ion-select-option v-for="(table, index) in available_table_list" :key="index" :value="index">{{ table }}</ion-select-option>
      </ion-select>
    </ion-item>
    <!-- </ion-list> -->
  </div>
  <ion-button class="occupie-table-button" @click.prevent="submit" :disabled="disableBtn">{{rootElement.$t('occupie-table')}}</ion-button>
</ion-content>

当我在 ion-input 中添加必需的属性时,必需的属性不起作用并且提交的表单没有检查。

4

1 回答 1

1

看到这个 - https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9

尝试

<IonInputVue v-model="contact_number" size="10"/>
于 2019-11-23T19:52:17.100 回答